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则 版 现时 


随 着 我 国 改革 开放 的 进一步 深化 ， 高 等 教育 也 得 到 了 快速 发 展 ， 各 地 高 校 紧 密 结合 
方 经 济 建设 发 展 需 要 , 科学 运用 市 场 调节 机 制 , 加 大 了 使 用 信息 科学 等 现代 科学 技术 提升 、 
改造 传统 学 科 专 业 的 投入 力度 ， 通 过 教育 改革 合理 调整 和 配置 了 教育 资源 ， 优 化 了 传统 学 
科 专 业 ， 积 极为 地 方 经 济 建设 输送 人 才 ， 为 我 国 经 济 社会 的 快速 、 健 康 和 可 持续 发 展 以 及 
高 等 教育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ， 高 等 教育 质量 还 需要 进一步 提高 以 适应 
经 济 社会 发 展 的 需要 , 不 少 高 校 的 专业 设置 和 结构 不 尽 合理 , 教师 队伍 整体 素质 亚 待 提高 ， 
人 才 培 养 模式 、 教 学 内 容 和 方法 需要 进一步 转变 ， 学 生 的 实践 能 力 和 创新 精神 豚 待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ， 教 育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 》 计划 实施 “高 等 学 校本 科教 学 质量 与 教学 改革 
工程 〈 简 称 “ 质 量 工程 )”， 通 过 专业 结构 调整 、 课 程 教材 建设 、 实 践 教学 改革 、 教 学 团队 
建设 等 多 项 内 容 ， 进 一 步 深 化 高 等 学 校 教学 改革 ， 提 高 人 才 培 养 的 能 力 和 水 平 ， 更 好 地 满 
足 经 济 社会 发 展 对 高 素质 人 才 的 需要 。 在 贯彻 和 落实 教育 部 “质量 工程 ”的 过 程 中 ， 各 地 
高 校 发 挥 师资 力量 强 、 办 学 经 验 丰 富 、 教 学 资源 充裕 等 优势 , 对 其 特色 专业 及 特色 课程 ( 群 ) 
加 以 规划 、 整 理 和 总 结 ， 更 新 教学 内 容 、 改 革 课 程 体系 ， 建 设 了 一 大 批 内 容 新 、 体 系 新 、 
方法 新 、 手 段 新 的 特色 课程 。 在 此 基础 上 ， 经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建 
议 ， 清 华 大 学 出 版 社 在 多 个 领域 精 选 各 高 校 的 特色 课程 ， 分 别 规划 出 版 系列 教材 ， 以 配合 
“质量 工程 ”的 实施 ， 满 足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

为 了 深入 贯彻 落实 教育 部 《关于 加 强 高 等 学 校本 科教 学 工作 ， 提 高 教学 质量 的 若干 意 
见 》 精 神 ， 紧 密 配合 教育 部 已 经 启动 的 “高 等 学 校 教 学 质量 与 教学 改革 工程 精品 课程 建设 
工作 ” 在 有 关 专家 、 教 授 的 倡议 和 有 关 部 门 的 大 力 支持 下 ,我 们 组 织 并 成 立 了 “清华 大 学 
出 版 社 教材 编审 委员 会 ”( 以 下 简称 “ 编 委 会 ”>, 旨 在 配合 教育 部 制定 精品 课程 教材 的 出 版 
规划 , 讨论 并 实施 精品 课程 教材 的 编写 与 出 版 工作 。“ 编 委 会 ”成 员 皆 来 自 全 国 各 类 高 等 学 
校 教学 与 科研 第 一 线 的 骨干 教师 ， 其 中 许多 教师 为 各 校 相关 院 、 系 主管 教学 的 院 长 或 系 
主任 。 

按照 教育 部 的 要 求 ,“ 编 委 会 ”一 致 认为 ， 精 品 课程 的 建设 工作 从 开始 就 要 坚持 高 标 
准 、 严 要 求 ， 处 于 一 个 比较 高 的 起 点 上 ; 精品 课程 教材 应 该 能 够 反映 各 高 校 教学 改革 与 课 
程 建设 的 需要 ， 要 有 特色 风格 、 有 创新 性 新 体系 、 新 内 容 、 新 手段 、 新 思路 ， 教 材 的 内 
容 体 系 有 较 高 的 科学 创新 、 技 术 创 新 和 理念 创新 的 含量 )、 先 进 性 (对 原 有 的 学 科 体 系 有 实 
质 性 的 改革 和 发 展 , 顺应 并 符合 21 世纪 教学 发 展 的 规律 , 代表 并 引领 课程 发 展 的 趋势 和 方 
向 )、 示 范 性 (教材 所 体现 的 课程 体系 具有 较 广泛 的 辐射 性 和 示范 性 ) 和 一 定 的 前 瞻 性 。 教 
材 由 个 人 申报 或 各 校 推 荐 (通过 所 在 高 校 的 “ 编 委 会 ”成 员 推 荐 ), 经 “ 编 委 会 ”认真 评审 ， 
最 后 由 清华 大 学 出 版 社 审定 出 版 。 
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目前 ， 针 对 计算 机 类 和 电子 信息 类 相关 专业 成 立 了 两 个 “ 编 委 会 ”， 即 “清华 大 学 出 
版 社 计算 机 教材 编审 委员 会 ”和 “清华 大 学 出 版 社 电子 信息 教材 编审 委员 会 推出 的 特色 


精品 教材 包括 : 

(1) 21 世纪 高 等 学 校规 划 教材 计算 机 应 用 一 一 高 等 学 校 各 类 专业 ， 特 别 是 非 计算 机 
专业 的 计算 机 应 用 类 教材 。 

(2) 21 世纪 高 等 学 校规 划 教材 。 计算 机 科学 与 技术 一 一 高 等 学 校 计算 机 相关 专业 的 
教材 。 


(3) 21 世纪 高 等 学 校规 划 教材 。 电子 信息 一 一 高 等 学 校 电子 信息 相关 专业 的 教材 。 
(4) 21 世纪 高 等 学 校规 划 教材 。 软 件 工程 一 一 高 等 学 校 软 件 工程 相关 专业 的 教材 。 
(5) 21 世纪 高 等 学 校规 划 教材 。 信 息 管理 与 信息 系统 。 

(6) 21 世纪 高 等 学 校规 划 教 材 。 财经 管理 与 应 用 。 
(7) 21 世纪 高 等 学 校规 划 教 材 。 电 子 商 务 。 

(8) 21 世纪 高 等 学 校规 划 教材 。 物 联网 。 


清华 大 学 出 版 社 经 过 三 十 年 的 努力 ， 在 教材 尤其 是 计算 机 和 电子 信息 类 专业 教材 出 版 
方面 树立 了 权威 品牌 ， 为 我 国 的 高 等 教育 事业 做 出 了 重要 贡献 。 清 华 版 教材 形成 了 技术 准 
确 、 内 容 严 谨 的 独特 风格 ， 这 种 风格 将 延续 并 反映 在 特色 精品 教材 的 建设 中 。 


清华 大 学 出 版 社 教材 编审 委员 会 
联系 人 : 魏 江 江 


E-mail:weijj@tup.tsinghua.edu.cn 


随 着 网 络 技术 的 发 展 ，Web 应 用 越 来 越 广泛 。 要 开发 具有 实际 应 用 价值 的 Web 应 用 程 
序 ， 必 须 熟练 掌握 相关 的 Web 编程 基础 知识 。 国 内 许多 高 等 院 校 的 计算 机 相关 专业 ,纷纷 
开设 了 Web 编程 技术 的 相关 课程 。 作 者 针对 计算 机 科学 与 技术 、 信 息 管理 、 电 子 商务 、 软 
件 工程 等 专业 对 Web 编程 能 力 的 需求 等 问题 ， 根 据 教学 的 实际 需要 ， 结 合 多 年 来 在 Web 
教学 和 Web 开发 中 的 经 验 ， 编 写 了 这 本 教材 。 

Web 编程 基础 是 进行 Web 应 用 程序 开发 的 前 提 ， 在 HTML5、CSS3、JavaScript 基础 
之 上 ， 才 能 结合 动态 的 网 页 开发 技术 ， 开 发 出 具有 动态 交互 、 功 能 强大 、 界 面 友好 的 Web 
应 用 程序 。 本 书 在 第 1 版 的 基础 上 增加 了 部 分 新 章节 ， 并 且 对 部 分 原 有 的 过 时 内 容 进 行 了 
删 减 。 

全 书 共 14 章 : 

第 1 章 HIMLS 概述 ， 介 绍 了 HIMLS 的 新 特性 、 语 法 、 文 档 结构 、 常 用 标签 ; 

第 2 章 HIMLS 表单 ， 介 绍 了 HTMLS5 表单 新 增 的 表单 控件 ; 

第 3 章 HIMLS 画布 ， 介 绍 了 canvas 元 素 绘制 简单 图 形 、 文 字 、 图 形变 换 等 ; 

第 4 章 音频 视频 和 Web 存储， 介绍 了 HTMLS5 中 引入 音频 视频 的 方法 ，Web Storage 
以 及 Web SQL; 

第 5 章 离线 应 用 和 Web Workers， 介 绍 了 HIMLS 中 离线 缓存 的 方法 以 及 使 用 Web 
Workers 在 后 台 线 程 中 处 理事 务 或 逻辑 的 方法 ; 

第 6 章 地 理 位 置 ， 介 绍 了 Geolocation API 及 其 获取 当前 地 理 位 置 、 监 视 当 前 地 理 位 
置 、 取 消 监视 当前 地 理 位 置 的 方法 ; 

第 7 章 CSS3， 介绍 了 CSS3 的 使 用 方法 、 继 承 、 各 类 选择 符 ; 

第 8 章 CSS3 样式 属性 ， 介 绍 了 CSS3 的 各 种 样式 属性 的 使 用 ; 

第 9 章 CSS3 页 面 布局 ， 介 绍 了 使 用 表格 、 框 架 、DIV+CSS 进行 页 面 布局 的 方法 ; 

第 10 章 JavaScript 基础 ， 介 绍 了 JavaScript 的 语法 、 结 构 和 函数 等 ; 

第 11 章 JavaScript 对 象 ， 介 绍 了 JavaScript 中 的 Aray、Date、String 等 对 象 ; 

第 12 章 DOM 编程 ,介绍 了 事件 、window 对 象 、document 对 象 、history 对 象 以 及 自 
定义 对 象 等 ; 

第 13 章 AJAX， 介 绍 了 AJAX 的 原理 及 其 与 JSP、XML、 数 据 库 的 交互 ; 

第 14 章 jQuery， 介 绍 了 jQuery 的 选择 器 、 事 件 处 理 、 特 效 和 操作 DOM 等 。 

本 书 是 作者 多 年 来 教学 和 软件 开发 经 验 的 总 结 。 书 中 内 容 按 照 由 浅 入 深 、 循 序 渐进 的 
原则 进行 组 织 ， 注 重 理论 与 实践 相 结合 ， 力 求 内 容 全 面 、 结 构 清 晰 。 书 中 程序 实例 简短 实 
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用 , 易于 教师 教学 使 用 和 读者 学 习 。 书 中 所 有 代码 均 经 过 调试 , 并 给 出 了 运行 结果 的 截图 。 
大 部 分 案例 来 源 于 网 络 教学 平台 的 开发 实践 ， 具 有 较 高 的 实际 应 用 价值 。 每 章 均 配 有 与 内 
容 紧 密 相关 的 课件 、 习 题 及 参考 答案 、 源 代码 。 习 题 部 分 来 源 于 与 知识 点 相关 的 面试 题 ， 
切合 实际 需求 。 

本 书 第 1 一 8 章 由 任 平 红 编号， 第 9 一 14 章 由 陈 意 编写 。 

本 书 既 可 作为 高 等 院 校 Web 程序 设计 和 Web 编程 技术 的 教材 ， 也 可 作为 广大 自学 者 
和 软件 开发 人 员 的 参考 用 书 。 
由 于 水 平 有 限 ， 书 中 不 当 之 处 在 所 难免 ， 屋 求 读者 批评 指正 。 


编 者 
2018 年 6 月 
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(个 互联 网 概述 


WWW 是 World Wide Web 的 缩写 ,简称 为 Web。1989 年 Web 诞生 于 欧洲 原子 能 研究 
中 心 (European Organization for Nuclear Research， 简 称 为 CERN)，CERN 的 物理 学 家 Tim 
Bemers-Lee 提出 了 一 个 新 的 Internet 协议 ， 命 名 为 Web， 其 目的 是 为 了 使 科学 家 们 可 以 利 
用 网 络 共享 文档 。1990 年 11 月 ， 第 一 个 Web 服务 器 nxoc01.cern.ch 开始 运行 ， 由 Tim 
Bemers-Lee 编写 的 图 形 化 Web 浏览 器 第 一 次 出 现在 人 们 面前 。1991 年 ，CERN 正式 发 布 
了 Web 技术 标准 。1993 年 ， 第 一 个 图 形 界 面 的 浏览 器 Mosaic 开发 成 功 。1994 年 ， 著 名 
的 Netscape Navigator 浏览 器 问世 。1995 年 ， 由 Mosaic 衍生 而 来 的 正 浏览 器 诞生 。 目 前 ， 
与 Web 相关 的 标准 都 由 W3C 组 织 (World Wide Web Consortium， 万 维 网 联盟 ) 管理 和 
维护 。 

Web 是 运行 在 Intemet 之 上 所 有 的 HTTP 服务 器 软件 和 对 象 的 集合 ， 是 一 个 分 布 式 
的 超 媒体 信息 系统 ，Web 可 以 使 人 们 利用 网 络 实现 信息 资源 的 共享 。 从 技术 层面 上 分 析 ， 
Web 主要 包括 超 文 本 传输 协议 (HITP)、 统 一 资源 定位 符 (URL) 以 及 超 文本 标记 语言 
(CHTML )。 


1.1.1 超 文 本 传输 协议 


超 文 本 传输 协议 (HyperText Transfer Protocol，HTTP) 基于 客户 端 浏览 器 或 其 他 程序 
与 Web 服务 器 之 间 的 面向 对 象 的 应 用 层 , 可 用 于 实现 客户 端 和 服务 器 端的 信息 传输 。 HITP 
由 于 其 简洁 、 快 速 等 特点 ， 适 用 于 分 布 式 超 媒体 信息 系统 。 它 允许 将 超 文本 标记 语言 文档 
从 Web 服务 器 传送 到 客户 端 浏览 器 ，HTTP 工作 在 TCP/IP 协议 体系 中 。 客 户 端 和 服务 器 
端 必须 都 支持 HITP， 才 能 实现 客户 端 和 服务 器 端 之 间 的 交互 。 

HTTP 协议 具有 如 下 特点 。 

(1) 支持 客户 端 /服务 器 端 模式 。 

(2) 简单 快速 。 客 户 端 向 服务 器 提交 请 求 时 ， 只 需要 发 送 请 求 方法 和 路 径 。 请 求 方法 
有 GET、HEAD、POST。 请 求 方法 不 同 ， 客 户 端 和 服务 器 联系 的 类 型 也 不 同 。 由 于 HTTP 
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协议 简单 ， 服 务 器 的 程序 规模 较 小 ， 所 以 通信 速度 较 快 。 

(3) 灵活 。HTTP 允许 传输 任意 类 型 的 数据 对 象 ， 被 传输 的 数据 对 象 的 类 型 由 
Content-Type 标识 。 

(4) 无 连接 。 无 连接 指 的 是 每 次 连接 只 处 理 一 个 请 求 ， 各 个 连接 之 间 是 相互 独立 的 。 
服务 器 处 理 完 客户 端的 请 求 ， 并 接收 到 客户 端的 应 答 后 即 断 开 连 接 。 无 连接 方式 可 以 节省 
传输 成 本 。 

(5) 无 状态 。HTTP 协议 是 无 状态 协议 ， 无 状态 指 的 是 事务 处 理 没 有 记忆 能 力 ， 这 意 
味 着 如 果 后 续 的 处 理 需要 使 用 前 面 的 信息 ， 则 必须 重新 传输 。 无 状态 可 能 会 导致 每 次 连接 
传输 的 数据 量 较 大 ， 但 是 当 后 续 连 接 不 需要 前 面 的 信息 时 ， 应 答 会 比较 快 。 


1.1.2 ”统一 资源 定位 符 


统一 资源 定位 符 (Uniform Resource Locator，URL) 是 用 于 完整 地 描述 Intemet 上 网 页 
和 其 他 资源 地 址 的 一 种 标识 方法 。Intemet 上 的 每 一 个 资源 都 有 一 个 唯一 的 名 称 标识 , 通常 
称 之 为 URL 地 址 或 者 网 址 ,这 种 地 址 可 以 是 本 地 磁盘 ,也 可 以 是 局 域 网 上 的 某 一 台 计 算 机 ， 
更 多 的 是 Intemet 上 的 某 个 站 点 。URL 可 以 使 客户 端 使 用 统一 的 方法 访问 资源 。 

URL 一 般 由 协议 类 型 、 存 放 资 源 的 域名 或 主机 了 P 地 址 ， 以 及 资源 文件 的 路 径 3 部 分 
组 成 。 其 语法 格式 如 下 : 


protocol://hostname[:port]/path/[;parameters] [?query]#fragment 


其 中 : 


protocol 指定 传输 所 使 用 的 协议 类 型 ， 最 常用 的 传输 协议 是 HITP， 另 外 ,还 有 文件 
传输 协议 FTP、 访 问 本 地 计算 机 上 的 文件 的 协议 包 e、 简 单 邮 件 传输 协议 SMTP 等 。 
hostname 指定 存放 资源 的 服务 器 名 称 或 者 主机 的 卫 地 址 。 
port 指定 端口 号 ， 可 选 ， 省 略 时 采用 传输 协议 默认 的 端口 号 。 例 如 ，HTTP 协议 默 
认 的 端口 号 是 80。 
path 指 的 是 资源 的 存放 路 径 ， 一 般 用 来 表示 一 个 目录 或 者 文件 的 地 址 。 
parameters 为 可 选项 ， 可 以 用 于 指定 特殊 参数 。 
query 为 可 选项 ， 当 请 求 动态 网 页 时 ， 可 以 向 动态 网 页 传递 字符 串 类 型 的 参数 ， 多 
个 参数 之 间 用 “人 ”符号 隔 开 ， 每 个 参数 名 和 值 之 间 用 “=” 连 接 。 

例如 ，http:Wlocalhost:8080/ch0LUindex.jsp?name=wangmingming&pwd=123456， 此 地 址 
访问 index.jsp 文件 ， 并 且 向 其 传递 参数 name 和 pwd。 


1.1.3” 超 文本 标记 语言 


超 文本 标记 语言 (HyperText Markup Language，HTML) 即 HTML 语言 。HTML 是 一 
种 用 于 描述 网 页 文档 的 标记 语言 ， 使 用 HTML 可 以 构建 网 页 文档 ， 可 以 将 Intemet 上 的 资 
源 组 合 在 一 起 . 它 是 目前 网 络 上 应 用 最 为 广泛 的 语言 HTML 是 标准 通用 标记 语言 (Standard 
Generalized Markup Language，SGML) 下 的 一 个 应 用 ， 也 是 一 种 规范 ， 一 种 标准 ， 它 通过 
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标记 符号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。 网 页 文件 本 身 是 一 种 文本 文件 ， 通 过 在 文本 
文件 中 添加 标记 符 ， 可 以 定义 内 容 的 显示 样式 。HTML 语言 虽然 简单 ， 但 是 功能 强大 ， 支 
持 不 同 数据 格式 的 文件 嵌入 ， 其 特点 主要 包括 : 
。 简单 性 。 采 用 超 集 方式 可 以 升级 HTML 语言 ， 使 用 起 来 灵活 方便 。HTML 文件 是 
文本 文件 ， 可 以 采用 任何 文本 编辑 工具 编写 。 
。 可 扩展 性 。HTML 的 广泛 应 用 会 带 来 加 强 功 能 、 增 加 标签 符 的 需求 ，HTML 采用 扩 
展 子 类 元 素 的 方法 ， 使 系统 扩展 成 为 可 能 。 
。 平台 无 关 性 ,使 用 HTML 编写 的 文件 只 需要 浏览 器 即 可 解释 运行 , 与 操作 系统 无 关 。 
目前 几乎 所 有 的 Web 浏览 器 都 支持 HTML。 


1.1.4 XML 和 XHTML 


可 扩展 标记 语言 (Extensible Markup Language，XML ) 是 SGML 的 子 集 ， 是 一 种 定义 
电子 文档 结构 和 描述 其 内 容 的 国际 标准 语言 ， XML 是 由 W3C 发 布 的 ， 用 于 创建 通用 的 信 
息 格式 。 它 的 语法 是 基于 文本 的 ， 用 于 描述 、 传 递 与 交换 结构 化 信息 。XML 并 不 是 为 了 取 
代 HIML， 而 是 要 把 数据 与 表达 区 分 开 。 开 发 人 员 可 以 利用 XML 创建 任意 的 标签 来 描述 
信息 。 

XHTML (Extensible Hypertext Markup Language) 是 可 扩展 超 文本 标记 语言 ， 表 现 方 
式 与 HTML 类 似 ， 不 过 语法 上 更 为 严格 。2000 年 底 ，W3C 发 行 了 XHTML1.0， 这 是 一 种 
在 HIML4.01 基础 上 优化 和 改进 的 新 语言 ， 目 的 是 基于 XML 应 用 。XHMTL 是 一 种 增强 
了 的 HIML， 相 比 于 HIML 来 说 ，XHTML 更 严谨 、 更 纯净 ， 它 的 可 扩展 性 和 灵活 性 可 以 
适应 未 来 网 络 更 加 复杂 多 变 的 需求 。 


(2 HTML5 的 改变 


HTMLS5 草案 的 前 身 名 为 Web Application 1.0, 于 2004 年 被 WHATWG (Web Hypertext 
Application Technology Working Group ) 提出 ， 于 2007 年 被 W3C 接纳 。HTMLS5 是 HIML、 
XHTML 以 及 HTML DOM 的 新 标准 ， HTML5 之 前 的 HIML4.01 以 及 XHTML1.0/2.0 主 
要 把 HIML 限定 为 一 种 页 面 标记 语言 ， 而 HTML5 则 是 第 一 个 将 Web 作为 开发 平台 的 

目前 主流 的 浏览 器 一 般 都 提供 了 对 HTML5 的 支持 ， 例 如 最 新 版 本 的 Safari3.1+、 
Chrome3+、Firefox3.5+ 以 及 Opera9.5+ 都 部 分 支持 HIMLS 的 新 特性 ，Internet Explorer 9+ 
也 部 分 支持 HTML5 的 新 特性 。 


1.2.1 HTML5 新 增 元 素 


HIMLS 中 引入 了 很 多 新 的 标记 元 素 。 根 据 内 容 类 型 的 不 同 ， 这 些 元 素 可 以 分 为 内 嵌 、 
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流 、 标 题 、 交 互 、 元 数据 、 短 语 等 。 
1. 新 增 的 结构 元 素 
HIMLS 定义 了 一 组 新 的 语义 化 标记 来 描述 元 素 的 内 容 ， 可 以 简化 HTML 页 面 设计 ， 
并 且 在 搜索 引擎 抓 取 和 索引 网 页 时 , 也 可 以 利用 这 些 元 素 。 新 增 的 语义 化 标记 元 素 如 表 1-1 
所 示 。 
表 1-1 HTML5 新 增 的 语义 化 标记 元 素 


元 素 说 明 

header 页 面 或 页 面 中 某 一 个 区 块 的 页 眉 ， 一 般 为 导航 信息 
footer 页 面 或 页 面 中 某 一 个 区 块 的 页 脚 

section 页 面 中 的 一 块 区 域 ， 通 常 由 内 容 和 标题 组 成 

article 独立 的 内 容 块 ， 可 独立 于 页 面 其 他 内 容 使 用 

aside 非 正文 内 容 ， 独 立 于 页 面 的 主要 内 容 

Dav 作为 页 面 导 航 的 辅助 内 容 


以 上 元 素 本 身 并 没有 特殊 的 功能 ， 使 用 div 也 可 以 实现 以 上 功能 ， 但 是 由 新 的 语义 化 
元 素 组 成 的 网 页 结构 对 于 搜索 引擎 更 加 友好 ， 能 够 更 好 地 被 搜索 引擎 搜索 和 抓 取 。 

1) article 元 素 的 使 用 示例 可 参照 article.html 

article.html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>article 元素 </title> 
</head> 
<body> 
<article> 
<header> 
<h1> 这 是 一 个 标题 </h1> 
<p>Hello</p> 
</header> 
<article> 
<header> 作 者 </header> 
<p> 评 论 </p> 
<footer> 时 间 </footer> 
</article> 
<footer> 
<p> 这 是 底部 </p> 
</footer> 
</article> 
</body> 
</html> 


article.html 的 显示 结果 如 图 1-1 所 示 。 


| 
%1 ls -AN57 
| 加 加 加 


图 1-1 article.html 的 显示 结果 


2) aside 元 素 的 使 用 示例 可 参照 aside.html 
aside.html 
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</body> 
</html> 


aside.html 的 显示 结果 如 图 1-2 所 示 。 


pe | 号 | 
DD zside 元 素 的 使 用 示例 。 x SS 
© OO |© 1270018020/chol- 女 | ; 
header 里 的 一 级 标题 


article 里 的 一 级 标题 
article 里 的 段落 
aside 里 的 一 级 标题 
aside 里 的 段落 


评论 | 


评论 的 内 容 


图 1-2 aside.html 的 显示 结果 


2. 新 增 的 功能 元 素 

HTMLS5 中 新 增 的 功能 元 素 包括 : 

。 hgroup 元 素 一 一 用 于 对 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 标题 进行 组 合 。 

figure 元 素 一 一 表示 一 段 独 立 的 流 内 容 ， 一 般 表示 文档 主题 流 内 容 中 的 一 个 独立 
单元 。 

。 video 元 素 一 一 定义 视频 ， 例 如 电影 片段 或 其 他 视频 流 。 

audio 元 素 一 一 定义 音频 ， 例 如 音乐 或 其 他 音频 流 。 

。 embed 元 素 一 一 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 MIDI、WAV、AIFF、AU、MP3 等 。 


。 mark 元 素 一 一 主要 用 来 在 视觉 上 向 用 户 呈 现 需 要 突出 显示 或 高 亮 显 示 的 文字 。 
。 time 元 素 一 一 表示 日 期 或 时 间 ， 也 可 以 同时 表示 两 者 。 

。 canvas 元 素 一 一 表示 图 形 ， 如 图 表 和 其 他 图 像 。 

。 output 元 素 一 一 表示 不 同类 型 的 输出 ， 例 如 脚本 的 输出 。 


。 source 元 素 一 一 为 媒介 元 素 定义 媒介 资源 。 


。 menu 元 素 一 一 表示 菜单 列表 ， 当 需要 列 出 表单 控件 时 使 用 该 标签 。 

。 ruby 元 素 表示 ruby 注释 。 

。 区 元 素 一 一 表示 字符 的 解释 或 发 音 。 

。 了 元素 一 一 在 mby 解释 中 使 用 ， 以 定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 。 
e wbr 元 素 表示 软 换行 。 

。 command 元 素 一 一 表示 命令 按钮 ， 如 单 选 按 钮 、 复 选 框 或 普通 按钮 。 


details 元 素 - 
合 使 用 。 


表示 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 , 可 与 summary 元 素 配 
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。 datalist 元 素 一 一 可 选 数据 的 列表 ， 与 input 元 素 配合 使 用 ， 可 以 制作 出 输入 值 的 下 
拉 列 表 。 
。 datagrid 元 素 一 一 表示 可 选 数 据 的 列表 ， 它 以 树 形 列表 的 形式 来 显示 。 


表示 生成 密 钥 。 
表示 运行 中 的 进程 , 可 以 使 用 progress 来 显示 JavaScript 中 耗费 时 


。 keygen 元 素 
。 progress 元 素 
间 的 函数 的 进程 。 


。 email 一 一 表示 必须 输入 E-mail 地 址 的 文本 输入 框 。 
e ul 表示 必须 输入 URL 地 址 的 文本 输入 框 。 


。 number 一 一 表示 必须 输入 数值 的 文本 输入 框 。 
range 一 一 表示 必须 输入 一 定 范围 内 数字 值 的 文本 输入 框 。 
Date Pickers 一 一 可 供 选 取 日 期 和 时 间 的 新 型 的 文本 输入 框 。 


1.2.2 HTML5 废除 的 元 素 


在 HTML5 中 废除 了 HIML4.01 中 过 时 的 元 素 。 

1， 能够 使 用 CSS 替代 的 元 素 

basefont、big、center、font、s、strike、tt 和 nu 这 些 元 素 都 是 用 来 表现 文本 效果 的 ， 而 
HIML5 提倡 把 呈现 效果 的 功能 放 到 CSS 样式 表 中 统一 处 理 。 其 中 ，font 元 素 允 许 由 编辑 
器 插入 ，s、strike 可 以 由 del 元 素 代 替 ，tt 元 素 可 以 由 CSS 的 font-family 属性 代替 。 

2. 不 再 使 用 frame 框架 

对 于 frameset、frame、noframes 元 素 ， 由 于 frame 框架 对 网 页 的 可 用 性 存在 负面 影响 ， 
因此 在 HIMLS 中 已 不 支持 frame 框架 ， 只 保留 了 内 联 框架 ifiame。 

3. 只 有 部 分 浏览 器 支持 的 元 素 

对 于 applet、bgsound、blink 和 marquee 等 元 素 ， 由 于 只 有 部 分 浏览 器 支持 ， 所 以 在 
HITIML5 中 废除 。 其 中 ，applet 元 素 可 以 由 embed 元 素 或 者 object 元 素 代 替 ，bgsound 元 素 
可 以 由 audio 元 素 代 替 ，marquee 可 以 由 JavaScript 脚本 代替 。 

4. 其 他 被 废除 的 元 素 

HTML5 中 其 他 被 废除 的 元 素 还 包括 : 

。 使 用 ruby 元 素 代 蔡 的 tb 元 素 。 

。 使 用 abbr 元 素 代替 的 acronym 元 素 。 

。 使 用 元 素 代 蔡 的 dir 元 素 。 

。 使 用 form 元 素 与 input 元 素 相 结合 代替 的 isindex 元 素 。 

。 使 用 pre 元 素 代替 的 listing 元 素 。 

。 使 用 code 元 素 代 替 的 xmp 元 素 。 

。 使 用 GUIDS 代替 的 nextid 元 素 。 

。 使 用 “text/plain”MIME 类 型 代替 的 plaintext 元 素 。 
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1.2.3 HTML5 新 增 的 属性 


HTMLS5 中 新 增 的 属性 包括 表单 属性 、 链 接 属性 以 及 其 他 属性 。 

1. 表单 属性 

1) autofocus 属性 

对 input 元 素 的 所 有 类 型 以 及 由 select、textarea 与 button 元 素 指定 的 autofocus 属性 ， 
则 在 页 面 加 载 后 元 素 会 自动 获得 焦点 ， 正 常情 况 下 ， 一 个 页 面 只 有 一 个 元 素 有 autofocus 
属性 ， 如 果 设 置 多 个 ， 则 第 一 个 有 效 。 

2) placeholder 属性 

对 input 元 素 的 text、search、url、telephone、email 以 及 password 类 型 ， 以 及 textarea 
元 素 指定 placeholder 属性 , 可 以 对 用 户 的 输入 进行 提示 。 该 提示 会 在 输入 字段 为 空 时 显示 ， 
并 会 在 输入 框 获取 焦点 时 显示 。 

3) form 属性 

对 input 元 素 的 所 有 类 型 以 及 由 output、select、textarea、button 与 fieldset 指定 的 form 
属性 ， 声 明 元 素 属 于 哪个 表单 ， 则 不 论 元 素 位 于 页 面 的 什么 位 置 ， 都 在 表单 之 内 。 一 个 输 
入 元 素 可 以 属于 一 个 或 多 个 表单 ,多 个 表单 使 用 空格 隔 开 。 输入 元 素 的 form 属性 值 必须 是 
所 属 表单 的 id 值 。form 属性 可 以 为 页 面 布局 带 来 一 定 的 便利 。 

4) required 属性 

为 input 元 素 的 text、search、url、telephone、email、password、Date pickers、number、 
checkbox、radio、file 类 型 指定 required 属性 , 则 表示 用 户 提交 时 该 元 素 的 输入 值 不 能 为 空 。 

5) autocomplete 属性 

为 form 元 素 和 input 元 素 的 text、 search、 url、 telephone、 email、 password、 Date pickers、 
Iange、color 类 型 指定 autocomplete 属性 的 值 为 "on"， 人 允许 浏览 器 预测 对 输入 域 的 输入 ， 当 
用 户 在 输入 域内 开始 输入 时 , 浏览 器 基于 之 前 输入 的 值 显示 出 推荐 选项 。 如果 autocomplete 
属性 值 为 "off'， 则 不 允许 元 素 启 用 自动 完成 功能 。 

6) 重 置 表单 默认 行为 的 新 属性 

在 HIML4.01 中 一 个 表单 内 的 所 有 元 素 通 过 表单 的 action 属性 统一 提交 到 动态 处 理 程 
序 , HIMLS 中 可 以 通过 formaction 属性 实现 单 击 不 同 的 提交 按钮 , 将 表单 提交 到 不 同 的 动 
态 处 理 程序 。 另 外 ， 在 HTML4.01 中 一 个 表单 只 有 一 个 method 属性 指定 统一 的 提交 方法 ， 
在 HIMLS 中 可 以 通过 formmethod 实现 单 击 不 同 的 按钮 使 用 不 同 的 提交 方法 。 

HTMLS5 中 的 表单 非常 灵活 ， 因 为 HIMLS 中 input 元 素 的 submit 和 image 类 型 ， 以 及 
button 元 素 增加 了 formaction、 formenctype、formmethod、formnovalidate 及 formtarget 属 
性 ,分 别 用 来 重 写 所 在 表单 的 相应 属性 ,例如 formaction 重 写 表单 的 action 属性 , formmethod 
重 写 表单 的 method 属性 。 

7) image 提交 按钮 新 增 width 和 height 属性 

width 和 height 属性 可 以 用 来 设置 input 元 素 的 image 类 型 的 图 像 的 宽度 和 高 度 。 

8) list 属性 

list 属性 与 <datalist> 标 签 配 合 使 用 ，datalist 是 输入 域 的 选项 列表 ， 当 用 户 要 设 定 的 值 
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不 在 选择 列表 内 时 ， 人 允许 自行 输入 。 关 于 <datalist> 标 签 后 面 会 有 详细 介绍 。list 属性 适用 
于 input 元 素 的 text、search、url、telephone、email、date pickers、number、range、color 
类 型 。 

9) max、min 和 step 属性 

max 属性 规定 输入 域 所 允许 的 最 大 值 ，min 属性 规定 输入 域 允许 的 最 小 值 ，step 属性 
为 输入 域 合法 的 数字 间隔 。 

10) pattern 属性 

pattern 属性 用 于 验证 输入 字段 的 模式 ， 即 正则 表达 式 。 在 HTML4.01 中 如 果 使 用 正则 
表达 式 验证 还 需要 结合 JavaScript 脚本 , 在 HTML5 中 直接 指定 patter 属性 值 即 可 。pattern 
属性 适用 于 input 元 素 的 text、search、url、telephone、email、password 等 类 型 。 

11) mnultiple 属性 

mnultiple 属性 允许 输入 域 中 可 选择 多 个 值 ， 适 用 于 input 元 素 的 email 和 file 类 型 。 

12) fieldset 增加 disabled 属性 

HTML5 为 fieldset 元 素 增加 了 disabled 属性 ， 可 以 把 它 的 子 元 素 设 成 disabled 状态 ， 
但 是 不 包括 legend 里 的 元 素 。 

13) label 增加 control 属性 

HIML5 为 label 新 增加 了 control 属性 ， 在 label 内 部 放置 一 个 表单 元 素 ， 可 以 通过 
<label> 的 control 属性 访问 该 表单 元 素 。 

14) selectionDirection 属性 
户 在 input 元 素 或 者 textarea 元 素 中 选取 部 分 文字 时 , 可 以 使 用 该 属性 获取 选取 方向 。 
当 用 户 正 向 选择 文字 时 ， 该 属性 值 为 "forward"; 当 反 向 选取 时 值 为 "backward"; 当 用 户 没 
有 选择 任何 文字 时 ， 该 属性 值 为 "forward"。 

以 上 新 增 表单 的 属性 的 使 用 方法 在 后 面 会 进行 详细 描述 。 

2. 链接 属性 

1) media 属性 

为 a 和 area 增加 了 media 属性 ， 规 定 目 标 URL 是 为 哪 种 类 型 的 媒介 或 设备 进行 优 
化 的 。 

2) area 新 增 hreflang、media、rel、type 属性 

为 了 保证 a 元 素 和 link 元 素 的 一 致 性 ，hreflang 规定 在 被 链接 的 文档 中 的 文本 语言 ， 
media 指定 对 何 种 设备 优化 ，rel 规定 当前 文档 与 被 链接 的 资源 之 间 的 关系 ，type 规定 目标 
URL 的 MIME 类 型 。 

3) link 新 增 sizes 属性 

sizes 属性 规定 被 链接 资源 的 尺寸 。 

4) base 新 增 target 属性 

为 base 元 素 增加 target 属性 是 为 了 与 a 元 素 保持 一 致 。 

3. 其 他 属性 

1) ol 新 增 reverse 属性 

reverse 属性 规定 有 序 表 倒 序 。 


~ 


St 
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2) meta 新 增 charset 属性 

charset 属性 指定 网 页 的 编码 集 。 

3) menu 新 增 type 和 label 属性 

label 为 menu 定义 标注 ，type 使 menu 可 以 以 上 下 文 菜单 、 工 具 条 、 列 表 右 键 快捷 菜 
单 3 种 形式 出 现 ， 但 此 属性 大 部 分 浏览 器 并 不 支持 。 

4) style 新 增 scoped 属性 

scoped 属性 允许 样式 只 应 用 到 style 元 素 的 父 元 素 及 其 子 元 素 ， 在 CSS 中 并 不 推荐 
使 用 。 

5) script 新 增 async 属性 

async 属性 指定 脚本 是 否 异 步 执行 ， 但 仅 适 用 于 外 部 脚本 。 

6) html 新 增 manifest 属性 

HTML5 为 html 元 素 增加 了 manifest 属性 , 指向 一 个 用 于 结合 离线 Web 应 用 API 的 应 
用 程序 缓存 清单 。 当 开发 离线 Web 应 用 程序 时 此 属性 与 API 结合 使 用 ， 定 义 一 个 URL， 
在 URL 上 描述 文档 的 缓存 信息 。 

7) iframe 新 增 sandbox、seamless、srcdoc 属性 

以 上 属性 用 于 提高 页 面 的 安全 性 ， 防 止 执行 不 信任 的 操作 。 


1.2.4 HTMLS5 的 新 特性 和 新 规则 


HTMLS 的 新 特性 包括 : 

。 用 于 绘画 的 canvas 元 素 ; 

。 用 于 媒介 播放 的 video 元 素 ; 

。 对 本 地 离线 存储 更 好 的 支持 ; 

。 新 的 特殊 内 容 ， 例 如 article、footer、header、nav、section 等 ; 
。 新 的 表单 控件 ， 例 如 calendar、date、time、email、url、search 等 。 
HTML5 的 新 规则 包括 : 

。 新 特性 应 该 基于 HIML、CSS、DOM 以 及 JavaScript; 

。 减少 对 外 部 插件 的 需求 ， 例 如 Flash; 

。 更 优秀 的 错误 处 理 ; 

。 更 多 取代 脚本 的 标记 ; 

。 HTMLS5 应 该 独立 于 设备 ; 

。 开发 进程 透明 。 


1.2.5 HTML5 开发 工具 


任何 一 款 文 本 编辑 工具 都 可 以 用 来 开发 HTML5， 以 下 列举 几 种 常用 的 HIML5 开发 
征 具 6 

1. Dreamweaver CS6 

Dreamweaver CS6 是 世界 顶级 软件 厂商 Adobe 推出 的 一 套 拥有 可 视 化 编辑 界面 ， 用 于 
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制作 并 编辑 网 站 和 移动 应 用 的 网 页 设计 软件 。 它 支持 代码 拆 分 、 设 计 、 实 时 视图 等 多 种 方 
式 来 创建 、 编 辑 修改 网 页 。 它 使 用 了 自 适 应 网 格 版 面 创建 页 面 ， 在 发 布 前 使 用 多 屏幕 预览 
审阅 ， 可 以 大 大 提高 工作 效率 。 

2. Nodepad++ 

Nodepad++ 是 程序 员 必 备 的 文本 编辑 器 , 它 小 巧 高 效 , 支持 27 种 编程 语言 或 脚本 语言 ， 
例如 C、C++、Java、C#、JavaScript、PHP 等 ，Nodepad++ 可 以 完美 地 代替 记事 本 。 

3. HBuilder 

HBuilder 是 DCloud (数学 天 堂 ) 推出 的 一 款 支 持 HIMLS 的 Web 开发 的 集成 开发 工 
具 ， 它 速度 较 快 ， 由 于 是 基于 Eclipse 的 ， 因 此 兼容 了 Eclipse 的 插件 。HBuilder 最 大 的 优 
势 就 是 通过 完整 的 语法 提示 和 代码 输入 法 、 代 码 块 等 , 大 幅 提升 了 HIML、JavaScript、CSS 
的 开发 效率 。 

4. Sublime Text 

Sublime Text 是 一 个 代码 编辑 器 (Sublime Text 2 是 收费 软件 ， 但 可 以 无 限期 试用 )。 
Sublime Text 具有 漂亮 的 用 户 界 面 和 强大 的 功能 ， 例 如 代码 缩 略 图 、Python 插件 、 代 码 段 
等 。Sublime Text 具有 自 定 义 键 绑 定 、 菜 单 和 工具 栏 ， 它 的 主要 功能 包括 拼写 检查 、 书 签 、 
完整 的 Python API、Goto 功能 、 即 时 切换 项 目 、 多 选择 、 多 窗口 等 。 另 外 ，Sublime Text 是 

-个 跨 平 台 的 编辑 器 ， 同 时 支持 Windows、Linux、Mac OS X 等 操作 系统 。 

5. WebStorm 

WebStorm 是 Jetbrains 公司 旗下 的 一 款 JavaScript 开发 工具 ,目前 已 经 被 为 数 众 多 的 中 
国 JavaScript 开发 者 誉 为 “Web 前 端 开发 神器 ”“ 最 强大 的 HTML5 编辑 器 ”“ 最 智能 的 
JavaScript IDE” 等 。 

6. Visual Studio Code 

Visual Studio Code 是 一 个 轻 量 级 且 功 能 强大 的 源 代码 编辑 器 ， 它 运行 在 桌面 上 ， 支 持 
Windows、Mac OS 和 Linux 系统 。 它 提供 了 对 JavaScript、TypeScript 和 Node.js 的 内 置 支 
持 ， 并 为 其 他 语言 (例如 C、C#、Java、Python、PHP、GO) 提供 了 一 个 丰富 的 扩展 生态 
系统 和 运行 平台 (如 .NET 和 Unity)。 


ka HTML5 文档 基本 结构 


HIML5 构建 文档 的 方式 与 旧版 的 HIML 类 似 ， 使 用 纯 HTMLS 编写 的 文件 扩展 名 
为 .html 或 者 .htm。 一 个 基本 的 HIMLS 文档 是 由 一 系列 的 标签 元 素 组 成 的 ， 标 签 元 素 不 区 
分 大 小 写 .HTML5 用 标签 来 限定 元 素 在 文档 中 的 位 置 .一 个 HTML5 文 件 包含 在 一 对 <html> 
标签 内 。HTML5 分 为 文档 头 和 文档 体 两 部 分 。 文 档 头 通过 一 对 <head> 标 签 定义 ， 用 于 指 
定 HIMLS 文件 的 属性 。 文 档 体 由 一 对 <body> 标 签 指定 ， 用 于 指定 文档 要 显示 的 内 容 ， 是 
文档 的 主体 部 分 。 例 如 第 一 个 HIMLS 文档 hello.html。 

hello.html: 


<!DOCTYPE html> 


> Web 编程 基础 一 一 HTML5、CSS3、JavaScript (第 2 版 ) 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 第 一 个 HTML5 文档 </title> 
</head> 
<body> 
<h2> 这 是 我 的 第 一 个 HTML5 文档 </h2> 
<h3> 欢 迎 学 习 Web 编程 基础 </h3> 
</body> 
</html> 


上 述 代码 中 , <!IDOCTYPE html> 代 表 文档 类 型 ， 声 明 非常 简洁 ,不 再 使 用 很 长 的 DID 
和 URL。 在 所 有 的 现代 浏览 器 中 ，DOCTYPE 会 强制 使 用 标准 模式 ， 这 意味 着 对 于 目前 还 


不 支持 HTML5 的 浏览 器 会 解析 那些 HTMLS5 中 兼容 的 旧 的 HTML 的 标签 部 分 


， 而 忽略 它 


们 不 支持 的 HIMLS 的 新 特性 。 对 于 含有 中 文 的 网 页 ， 需 要 在 <meta> 标 签 中 指明 字符 集 为 


UTF-8， 和 否则 会 显示 乱码 。HITMLS 限制 了 可 用 的 字符 集 ， 目 的 是 为 了 加 强 安全 


， 防 止 某 些 


类 型 的 攻击 。 如 无 特殊 说 明 ， 本 书 的 例子 都 使 用 Chrome 浏览 器 显示 结果 。 使 用 Chrome 


打开 hello html 文件 ， 显 示 结 果 如 图 1-3 所 示 。 
回 | 

/DD HME x oo 

CC 个 |10 1270018020/ch… 女 | 思 


这 是 我 的 第 一 个 HTML5 文 档 
欢迎 学 习 Web 编 程 基础 


图 1-3 ”hello.html 的 显示 结果 


(4 HTML5 语 ; 


HIMLS 文档 由 HIMLS 标签 和 用 户 自 定义 的 内 容 组 成 。HIMLS 标签 是 已 定义 好 的 标 
记 ， 可 用 来 控制 页 面 显示 的 内 容 ， 例 如 标题 、 列 表 、 段 落 、 图 像 以 及 动画 等 。 标 签 可 以 看 


作 是 HIMLS 的 命令 ， 通 过 指定 标签 可 以 定义 网 页 的 内 容 ， 通 过 指定 标签 的 属 


网 页 的 内 容 的 样式 。 


性 可 以 定义 


标签 可 以 分 为 单 标签 和 成 对 标签 两 种 。 单 标签 单独 使 用 ， 例 如 <meta>;， 成 对 标签 成 对 
使 用 ， 例 如 <head> 和 </head>。 有 的 标签 既 可 以 单独 使 用 ， 也 可 以 成 对 使 用 。 成 对 标签 由 起 
始 标签 “< 标签 名 >” 和 结束 标签 “</ 标 签名 >” 组 成 。 成 对 标签 的 作用 仅 限 于 这 对 标签 内 


部 的 内 容 。 


标签 内 部 可 包括 标签 属性 ， 用 于 指定 标签 内 容 的 显示 样式 ， 例 如 <hr> 标 签 的 align 和 


size 属性 。 属 性 可 作为 标签 的 一 部 分 ， 一 个 标签 可 以 包含 多 个 标签 属性 ， 标 签 


属性 之 间 使 
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用 空格 隔 开 。 例 如 ， 成 对 标签 的 属性 语法 格式 如 下 : 


< 标签 名 属性 1 王 "属性 1 的 值 ”属性 2 王 "属性 2 的 值 ”--> 
内 容 
</ 标 签名 > 


但 是 用 于 设置 标签 样式 的 属性 一 般 不 推荐 使 用 ， 应 使 用 CSS 设置 标签 的 显示 样式 。 
虽然 HTMLS5 标签 不 区 分 大 小 写 ， 属 性 值 是 否 使 用 引号 也 并 不 影响 使 用 ， 但 是 考虑 到 
文档 的 可 读 性 和 一 致 性 ， 一 般 推 荐 标签 全 部 使 用 小 写 ， 属 性 值 使 用 双 引 号 括 起 来 。 


人 5，HTML5 常用 标签 


1.5.1 <meta> 


<meta> 标 签 是 <head> 标 签 的 子 标 签 ， 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 签 
可 以 定义 HIML 文档 的 相关 信息 ， 用 来 描述 文档 的 属性 ， 例 如 作者 、 日 期 和 时 间 、 网 页 描 
述 、 关 键 词 、 页 面 刷新 等 。 搜 索引 擎 可 以 通过 机 器 人 自动 查找 网 页 中 的 meta 值 来 给 网 站 分 
类 ， 只 有 完善 了 meta， 一 个 HTML 页 面 才能 算是 完整 的 网 页 。<meta> 标 签 可 以 分 为 两 则 
分 : HITP 标签 信息 (Chttp-equiv) 和 页 面 描述 信息 (name)。<meta> 标 签 可 以 提供 有 关 页 
面 的 元 信息 ， 例 如 针对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。 
1. http-equiv 属性 
http-equiv 类 似 于 HITP 的 头 部 协议 , 可 以 利用 其 设 定 浏览 器 的 一 些 信息 ,以 正确 地 显 
示 网 页 。http-equiv 属性 指定 协议 头 类 型 ，content 属性 指定 协议 头 类 型 的 值 。 其 中 ， 常 
的 http-equiv 类 型 有 : 
。 content-type 一 一 用 于 定义 用 户 的 浏览 器 或 相关 设备 以 何 种 方式 加 载 数据 ,或 者 以 何 
种 应 用 程序 打开 资源 ， 例 如 ，<meta http-equiv="content-type" content="text/html; 
charset=utf-8"/>, 其 中 ,content 值 指定 以 普通 网 页 打开 资源 ,网 页 的 编码 方式 为 utf-8。 
。 refresh 一 一 指定 页 面 的 刷新 或 跳 转 的 间隔 时 间 和 跳 转 的 资源 。 例 如 ，<meta 
http-equiv="refresh" content="3;url=target.html"/>， 指 定 当 前 页 面 3 秒 后 跳 转 到 
targethtml 页 面 。 例 如 ，<meta http-equiv="refresh" content="3"/>， 没 有 指定 url 值 ， 
则 3 秒 后 刷新 当前 页 面 。 
。 expires 一 一 用 于 指定 网 页 缓存 的 过 期 时 间 。 缓存 一 旦 过 期 , 当 有 客户 端 请 求 网 页 时 ， 
必须 从 服务 器 上 重新 下 载 网 页 。 
e set-cookie 一 一 用 于 设置 Cookie， 浏 览 器 访问 某 个 页 面 时 会 将 Cookie 保存 在 客户 端 
的 缓存 中 ， 下 次 访问 时 可 以 从 缓存 中 读 取 ， 以 提高 访问 速度 。 必 须 使 用 GMT 格式 
指定 Cookie 的 过 期 时 间 。 例如 ,<meta http-equiv="set-cookie" content="cookievalue= 
XXx:;expires=Mon,12 May 2019 00:20:00 GMT"/> 
2. name 属性 
页 面 描述 信息 由 name 属性 和 content 属性 指定 。name 属性 指定 要 描述 的 页 面 信息 的 
类 型 ，content 用 来 描述 页 面 信息 的 值 。 常 见 的 页 面 信息 的 类 型 有 : 
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。 keywords 一 一 为 搜索 引擎 提供 的 关键 字 列 表 ， 例 如 ，<meta name="keywords" 
content="keyl, key2, key3..."/> 。 

。 description 一 一 为 搜索 引擎 提供 网 页 主要 内 容 的 描述 ,例如 , <meta name="description" 
content=" 网 页 描述 信息 "/>。 

。 author 一 一 标明 网 页 的 制作 者 。 

。 Iobots 一 一 用 以 提示 搜索 机 器 人 哪些 页 面 需要 索引 ， 哪 些 页 面 不 需要 索引 。content 


的 参数 有 all、none、index 等 值 ， 默 认 值 为 ndex。 各 参数 值 的 含义 如 表 1-2 所 示 。 


表 1-2 搜索 参数 值 
参数 值 解释 
index 搜索 页 面 
noindex 不 把 页 面 展示 在 搜索 结果 中 
noimageindex 禁止 搜索 引擎 索引 页 面 上 的 图 片 
none 页 面 将 不 被 搜索 ， 且 页 面 上 的 链接 不 可 以 被 查询 
follow 不 管 页 面 是 否 允 许 索 引 ， 页 面 上 的 链接 可 以 被 查询 
nofollow 页 面 上 的 链接 不 可 以 被 查询 
all 文件 将 被 检索 ， 且 页 面 上 的 链接 可 以 被 查询 


1.5.2 ”标题 


标题 可 用 来 分 隔 大 段 文 字 ， 概 括 大 段 文字 的 内 容 ， 从 而 吸引 读者 的 注意 ， 起 到 提示 的 
作用 。HTML5 中 提供 了 6 级 标题 ， 分 别 为 <h1> 一 <h6>。 其 中 ，<hl> 字 体 最 大 ，<h6> 字 体 
最 小 。 标 题 属 于 块 级 元 素 ， 浏 览 器 会 自动 在 标题 前 后 加 上 空 行 。 使 用 标题 标签 不 仅 可 以 使 
文字 突出 显示 ， 更 重要 的 是 搜索 引擎 可 以 使 用 标题 为 网 页 的 结构 和 内 容 编制 索引 。 用 户 可 
以 通过 标题 来 快速 地 浏览 网 页 。 例 如 ，heading.html。 

heading.html: 


<!DOCTYPE html > 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 标 题 </title> 
</head> 
<body> 
<h1> 这 是 一 级 标题 </h1> 
<h2> 这 是 二 级 标题 </h2> 
<h3> 这 是 三 级 标题 </h3> 
<h4> 这 是 四 级 标题 </h4> 
<h5> 这 是 五 级 标题 </h5> 
<h6> 这 是 六 级 标题 </h6> 
</body> 
</html> 


heading.html 的 显示 结果 如 图 1-4 所 示 。 


be 
/JD x We 
这 是 一 级 标题 
这 是 二 级 标题 
这 是 三 级 标题 
这 是 四 级 标题 
这 是 五 级 标题 


这 是 六 级 标题 


图 1-4 heading.html 的 显示 结果 


1.5.3 ”换行 元 素 
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换行 标签 是 <br >。<br 人 > 标签 是 空 标签 ， 没有 闭合 标签 。 注 意 使 用 <br /> 标签 来 输入 空 


行 ， 而 不 是 分 隔 段落 。 例 如 ，brhtml。 
br.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 换 行 </title> 
</head> 
<body> 
春 眠 不 觉 晓 <br /> 
处 处 闻 啼 鸟 <pr /> 
夜来 风雨 声 <br /> 
花 落 知 多 少 
</body> 
</html> 


brhtml 的 显示 结果 如 图 1-5 所 示 。 


© OH Oko01s0 女 
春 眼 不 觉 晓 


处 处 闻 啼 鸟 
夜来 风雨 声 
花 消 知 多 少 


1-5 ”br.html 的 显示 结果 
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1.5.4 ”分 隔 线 


分 隔 线 标签 <hr> 定 义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 。 在 HIML4.01 中 ,不 推 
荐 使 用 align、noshade、size 以 及 width 属性 , 在 HIMLS 中 不 再 支持 这 些 属 性 。 例 如 ，hrtml。 


hrhtml: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 分 隔 线 </title> 
</head> 
<body> 
<p> 分 隔 线 的 使 用 </P> 
<hr /> 
<p> 这 是 段落 1</p> 
<hr /> 
<p> 这 是 段落 2</p> 
<hr /> 
<p> 这 是 段落 3</p> 
</body> 
</html> 


hrhtml 的 显示 结果 如 图 1-6 所 示 。 


口 2 x 
C 个 10 127001:8020/chol 女 | : 
分 隔 线 的 使 用 
这 是 段落 1 


这 是 段落 2 


这 是 段落 3 


1-6 hr.html 的 显示 结果 


1.5.5 段落 


段落 标签 <p> 可 以 使 文字 排列 更 加 整齐 、 清 晰 。<p> 标 签 既 可 以 成 对 使 有 
使 用 。<p> 标 签 是 块 级 元 素 ， 浏 览 器 会 自动 在 <p> 标 签 的 前 后 加 上 一 定 的 空 


属性 align 用 来 指定 文本 显示 时 的 对 齐 方式 ， 可 取 center、left、right 3 个 值 。 


属性 设置 <p> 标 签 的 显示 样式 ， 推 荐 使 用 样式 表 ， 读 者 可 参照 本 书后 面 的 内 


， 也 可 以 单独 
白 。<p> 标 签 的 
但 不 推荐 使 用 
容 。<p> 标 签 的 
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使 用 示例 如 p.html。 
p-html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 段 落 </title> 
</head> 
<body> 
<p align="center"> 春 晓 </p> 
<p align="center"> 
春 眠 不 觉 晓 <br /> 
处 处 闻 啼 鸟 <pr /> 
夜来 风雨 声 <br /> 
花 落 知 多 少 
</p> 
</body> 
</html> 


p.html 的 显示 结果 如 图 1-7 所 示 。 
四 lx™) 


70 mw x (a 
GC 合 |0hz7oo1802 女 


春晓 
春 眼 不 觉 晓 
处 处 闻 啼 鸟 
夜来 风雨 声 
花 落 知 多 少 
| 


1-7 ”p.html 的 显示 结果 


1.5.6 ”特殊 字符 


在 HTML 中 ， 有 些 符号 是 有 特殊 含义 的 ， 例 如 “<” 和 “>” 用 于 表示 标签 ,“&” 用 
于 表示 转 义 符号 ， 如 果 要 在 网 页 上 显示 以 上 特殊 符号 ， 不 可 以 直接 使 用 ， 必 须 使 用 转 义 字 
符 。 在 HIML 中 定义 转 义 字符 有 两 个 原因 : 第 一 是 某 些 符号 有 特殊 含义 ， 例 如 前 面 提 到 的 
“<” 等 ， 第 二 是 某 些 符号 在 ASCII 字符 集中 没有 定义 ， 需 要 使 用 转 义 字符 来 表示 。 

转 义 字符 由 3 部 分 组 成 ， 第 一 部 分 是 “及 ”符号 ; 第 二 部 分 是 实体 名 字 或 者 是 “#” 加 
上 实体 编号 ， 第 三 部 分 是 分 号 ， 表 示 转 义 字 符 结束 。 同 一 个 符号 ， 既 可 以 使 用 实体 名 称 ， 
例如 “&lt”， 也 可 以 使 用 实体 编号 ， 例 如 “&#60”， 这 两 种 方式 都 表示 符号 “<”。 实 体 名 
称 比 较 好 理解 ， 但 是 某 些 浏览 器 对 最 新 的 实体 名 称 的 支持 可 能 并 不 是 特别 好 。 实 体 编号 昌 


Y 


S 
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然 可 读 性 差 ， 但 是 各 种 浏览 器 都 可 以 识别 。 常 见 的 转 义 字符 如 表 1-3 所 示 。 
表 1-3 常用 的 转 义 字符 


显示 说 明 实体 名 称 实体 编号 
半 方 大 的 空格 Rensp; RH#8194; 
全 方 大 的 空格 Remsp; #8195; 
不 断 行 的 空格 &nbsp; &#160: 

< 小 于 &lt: &#60; 

> 夫 于 Rat: &#62; 

& 及 符号 &amp: &#38; 

时 双 引 号 有 quot' &#34: 

© 版 权 &copy; R&#169; 

® 已 注册 商标 Rreg; &#174; 

I™ 商标 (美国 ) Rtrade; &#8482; 

x 号 &times; &#215; 

村 除 号 &divide; &#247; 

注意 : 


。 转 义 字符 各 字符 间 不 能 出 现 空格 ; 

。 转 义 字符 必须 以 “;” 结 束 ; 

。 单独 的 “全 ”不 被 认为 是 转 义 字符 的 开始 ; 
。 转 义 字符 区 分 大 小 写 。 

例如 ，specialCharhtml。 

specialChar.html: 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 转 义 字符 </title> 
</head> 
<body> 
在 HTML 中 ， 常 用 的 特殊 字符 有 : <br /> 
&lt;、 &gt;、 &amp;、 &quot;、 &copy;、 &reg;、 &trade;、&times;、&divide; 等 。 
</body> 
</html> 


specialChar.html 的 显示 结果 如 图 1-8 所 示 。 
le 
Ds 
© HO O70 
在 HTML 中 ， 常用 的 特殊 字符 有 ， 


<、>、&、"、@、@、m、x、: 等 。 


图 1-8 specialCharhtml 的 显示 结果 
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1.5.7 ”列表 


HIML5 代码 支持 将 若干 列表 项 组 织 成 无 序列 表 、 有 序列 表 以 及 定义 列表 。 

1. 无 序列 表 

无 序列 表 仅 仅 用 于 表示 列表 项 之 间 存 在 并 列 关 系 ， 也 就 是 分 为 多 个 子 项 ， 但 是 子 项 之 
前 没有 相应 的 编号 ， 只 是 使 用 圆 点 或 者 其 他 的 符号 进行 标记 。 无 序列 表 使 用 标签 <ul> 定 义 ， 
列表 项 使 用 <li> 标 签 定义 ， 列 表 项 的 内 容 位 于 一 对 <li> 标 签 之 内 。<li> 标 签 的 type 属性 可 以 
定义 列表 项 的 标记 符 。 主 要 的 取 值 有 : 

。 disc 是 默认 值 ， 为 实心 圆 ; 

。 circle 为 空心 圆 ; 

。 square 为 实心 方块 。 

在 HIML4.01 中 一 般 不 推荐 直接 在 <1i> 标 签 中 使 用 type 属性 , 最 好 使 用 CSS 来 定义 列 
表 项 的 标记 样式 。 但 是 在 HTMLS5 中 不 再 反对 使 用 <li> 标 签 的 type 属性 。 例 如 ，ulLhtml。 

ul.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 序列 表 </title> 
</head> 
<body> 
常见 的 体育 运动 有 : <br /> 
<ul> 
<1i> 复 球 </1i> 
<1i> 排 球 </1i> 
<1i> 乒 乓 球 </1i> 
<1i> 足 球 </1i> 
</ul> 
</body> 
</html> 


ulLhtml 的 显示 结果 如 图 1-9 所 示 。 
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1-9 ”ul.html 的 显示 结果 
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2. 有 序列 表 
如 果 要 对 列表 中 的 列表 项 进行 排序 ， 则 使 用 有 序列 表 标 签 <ol>。<ol> 标 签 的 type 属性 
可 以 指定 有 序列 表 的 项 目 符号 的 类 型 ，type 属性 各 个 取 值 的 含义 如 表 1-4 所 示 。 


表 1-4 type 各 值 的 含义 


type 值 说 明 

1 默认 值 。 数 字 有 序列 表 (1、2、3、4-……) 

a 按 小 写字 母 顺序 排列 的 有 序列 表 (a、b、c、d*……) 

A 按 大 写字 母 顺序 排列 的 有 序列 表 (A、B、C、D……) 

i 按 小 写 罗马 字母 顺序 排列 的 有 序列 表 Gi、 盖 、 志 、iv……) 
I 按 大 写 罗马 字母 顺序 排列 的 有 序列 表 (I、I、IIT、IV……) 


与 无 序列 表 类 似 ， 在 HTMLS5 中 不 再 反对 使 用 <ol> 标 签 的 type 属性 。 另 外 ， 还 可 以 通 
过 指定 标签 的 start 属性 值 来 指定 排列 的 初始 值 ，start 属性 的 默认 值 为 1。 有 序列 表 和 无 序 
列表 都 可 以 媒 套 使 用 。 例 如 ，oLhtml。 

ol.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 有 序列 表 </title> 
</head> 
<body> 
<O1> 
<1i> 春 思 </1i> 
<1i> 望 岳 
<ol type="i"> 
<1i> 贷 宗 夫 如 何 ， 齐 鲁 青 未 了 。</1i> 
<1i> 造 化 钟 神 秀 ， 阴 阳 制 置 晓 。</1i> 
<1i> 荡 胸 生 层 云 ， 决 紫 入 归 鸟 。</1i> 
<1i> 会 当 凌 绝顶 ， 一 览 众 山 小 。 </1i> 


</o01> 
/Ti 
<1i> 送 别 </1i> 
<1i> 渭 川田 家 </1i> 
</ol1> 
</body> 
</html> 


olLhtml 的 显示 结果 如 图 1-10 所 示 。 


3. 定义 列表 
定义 列表 使 用 <dl> 标 签 设置 ， 也 称 为 描述 性 列表 。<dP> 标 签 通常 与 <dP> 标 签 和 <dd> 标 
签 配套 使 用 。<dt> 标 签 定义 列表 项 ，<dd> 标 签 用 于 描述 列表 项 。 例 如 ，dlLhtml。 


[ Ee | 
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i 贷 宗 夫 如 何 ， 齐 鲁 青 未 了 。 
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， 诀 紫 入 归 鸟 。 
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图 1-10 ol.html 的 显示 结果 


dl.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 定 义 列表 </title> 


</head> 
<body> 
<dl> 
<dt>HTML</dt> 
<dd> 是 一 种 设计 静态 网 页 的 超 文本 标记 语言 </dd> 
<dt>Javascript</dt> 
<dd> 是 一 种 客户 端 脚本 语言 </dd> 
<dt>Java</dt> 
<dd> 是 一 种 面向 对 象 的 、 平 台 无 关 的 高 级 程序 语言 </dd> 
</dl> 
</body> 
</html> 
dl.html 的 显示 结果 如 图 1-11 所 示 。 
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HIML 

是 一 种 设计 静态 网 页 的 超 文 本 标记 语言 
JavaScript 

是 一 种 客户 端 脚本 语言 


Java 
是 一 种 面向 对 象 的 、 平 台 无 关 的 高 级 程序 语言 


图 1-11 dl.html 的 显示 结果 
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.8 锚 元 素 


超级 链接 也 是 网 页 的 重要 元 素 之 一 ， 本 质 上 是 属于 网 页 的 一 部 分 。 文 本 、 图 像 、 超 级 


链接 是 网 页 的 3 种 基本 元 素 。 通 过 超级 链接 可 以 从 一 个 网 页 跳 转 到 其 他 的 目标 资源 。 目 标 
资源 可 以 是 图 片 、 电 子 邮 件 地 址 、 应 用 程序 等 。 可 以 链接 到 当前 Web 站 点 的 其 他 资源 ， 也 


可 以 
接 的 
的 各 


是 其 他 Web 站 点 的 资源 ， 甚 至 可 以 是 网 页 上 的 不 同位 置 。 而 在 网 页 上 用 来 完成 超级 链 
， 既 可 以 是 一 段 文 字 , 一 个 图 片 ， 也 可 以 是 图 片 的 一 部 分 (一 般 称 为 热 区 )。 互 联网 上 
个 资源 正 是 通过 超级 链接 相互 连接 起 来 的 。 

根据 创建 链接 的 对 象 的 不 同 ， 超 级 链接 分 为 文本 链接 、 图 像 链接 、 表 单 链接 等 。 

。 文本 链接 : 指 的 是 在 文本 上 创建 的 超级 链接 ， 是 最 常用 的 超级 链接 。 默 认 的 文本 超 
级 链接 下 方 会 出 现下 画 线 。 

。 图 像 链 接 : 指 的 是 在 图 像 、Flash 对 象 或 者 图 像 热 区 上 创建 的 链接 。 图 像 链接 比较 
美观 。 

。 表单 链接 : 通过 表单 的 action 属性 指定 目标 页 面 ， 一 般 目 标 页 面 是 动态 处 理 程序 ， 
例如 JSP、PHP、ASP、Java Servlet 等 。 当 用 户 单 击 表单 中 的 提交 按钮 时 ， 会 跳 转 
到 目标 页 面 。 

根据 目标 文件 的 类 型 和 位 置 的 不 同 ， 可 以 将 超级 链接 分 为 外 部 链接 、 内 部 链接 、 锚 链 


、 电 子 邮 件 链接 以 及 其 他 链接 等 。 


。 外 部 链接 : 链接 的 目标 资源 是 当前 Web 站 点 之 外 的 资源 。 

。 内 部 链接 : 链接 的 目标 资源 是 当前 Web 站 点 内 的 资源 ， 一 般 使 用 相对 路 径 来 表示 。 

。 销 链 接 : 链接 的 目标 是 网 页 的 某 一 个 特定 的 位 置 。 

。 电子 邮件 链接 : 当 单 击 电子 邮件 链接 后 ， 系 统 会 自动 启动 电子 邮件 程序 ， 并 将 电子 
邮件 的 接收 入 设置 成 电子 邮件 链接 中 指定 的 信息 。 


1. 文本 链接 
创建 文本 链接 使 用 一 对 <a> 标 签 ， 其 格式 如 下 : 
<a href=".."” target=".."> 文 本 </a> 


其 中 ，href 指 文本 链接 的 目标 资源 的 地 址 ，target 指 在 何 处 打开 目标 资源 。target 的 可 


取 值 及 其 含义 如 表 1-5 所 示 。 
表 1-5 target 的 取 值 
target 值 说 明 
_blank 在 新 窗口 中 打开 被 链接 文档 
_self 默认 值 ， 在 当前 的 窗口 或 框架 中 打开 被 链接 文档 
_parent 在 父 框 架 集中 打开 被 链接 文档 
_top 在 窗口 主体 中 打开 被 链接 文档 


此 不 
使 用 


注意 : 由 于 在 HTML5 中 不 再 支持 frame 和 frameset， 但 保留 了 内 联 框架 过 ame， 因 
允许 把 框架 名 称 设 定 为 目标 ，_self、_parent 以 及 top 这 3 个 值 大 多 数 与 过 ame 一 起 
。 超 级 链接 的 使 用 示例 可 参照 href html。 
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hrefhtml: 
<!DOCTYPE htm]l> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 文 本 链接 </title> 
</head> 
<body> 
常用 的 门户 网 站 有 : 
<ul> 
< 
<a href="http://www.sina.com.cn"> 新 浪 </a> 
/> 
中 
<a href="http://www.sohu.com"> 搜 狐 </a> 
</11> 
<1i> 
<a href="http://www.163.com"> 网 易 </a> 
< 
</ul> 
</body> 
</html> 


href.html 的 显示 结果 如 图 1-12 所 示 ， 单 击 链接 ， 会 打开 相应 的 网 站 。 


口 文本 链接 


| GH OD La 廊 
常用 的 门户 网 站 有 


1-12 ”href.html 的 显示 结果 


2.， 锚 链接 

当 网 页 的 内 容 比较 长 时 , 有 时 需要 链接 到 网 页 的 某 一 个 位 置 上 , 此 时 需要 使 用 锚 链 接 。 
使 用 锚 链 接 需要 先 定义 锚 点 ， 将 希望 链接 到 的 网 页 的 位 置 定义 为 锚 点 ， 并 为 其 取 名 。 然 后 
将 锚 点 前 加 “#” 作 为 超级 链接 的 href 值 即 可 ， 使 用 <a name="..."></a> 定 义 锚 点 。 例 如 ， 
anchorhtml。 

anchorhtml: 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 锚 链接 </title> 
</head> 
<body> 
<a name="head"></a> 
<a href="#tail"> 至 页 尾 </a> 
<p> 第 1 章 </p> 
<p> 第 2 章 </p> 
<p> 第 3 章 </p> 
<p> 第 4 章 </p> 
<p> 第 5 章 </p> 
<p> 第 6 章 </p> 
<p> 第 7 章 </p> 
<p> 第 8 章 </p> 
<p> 第 9 章 </p> 
<p> 第 10 章 </p> 
<p> 第 11 章 </p> 
<p> 第 12 章 </p> 
<p> 第 13 章 </p> 
<p> 第 14 章 </p> 
<p> 第 15 章 </p> 
<p> 第 16 章 </p> 
<a name="tail"></a> 
<a href="#head"> 至 页 首 </a> 
</body> 
</html> 


anchor.html 的 显示 结果 如 图 1-13 所 示 。 
单 击 “ 至 页 尾 ” 显示 的 结果 如 图 1-14 所 示 ; 再 单 击 “ 至 页 首 ”， 显 示 结 果 如 图 1-13 


所 示 。 
[ eee x | 加 = , le | 
/| 了 D 铸 久 接 x\ 口 氏 链接 x 全 汪 
CG 合 |@Oh27oo18ozo/cho 廊 | : | | 所 CC 全 © 1270018020/c. 疤 
至 页 F 第 13 章 B 
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1-13 ”anchor.html 的 显示 结果 图 1-14 单 击 “ 至 页 尾 ” 的 显示 结果 
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锚 链 接 的 用 法 类 似 于 书签 ， 如 果 要 链接 到 其 他 页 面 中 的 锚 点 ， 则 需要 在 锚 点 之 前 加 上 
文件 的 路 径 及 名 称 ， 例 如 和 anchorhtml 在 同一 目录 下 的 其 他 网 页 如 果 访 问 anchorhtml 中 
的 top 锚 点 ， 那 么 href 的 值 应 为 "anchorhtml#top"。 

3. 电子 邮件 链接 

电子 邮件 链接 也 使 用 <a> 标 签 来 实现 ， 要 发 送 电子 邮件 的 邮箱 地 址 由 mailto 指定 ， 表 
示 发 送 电子 邮件 的 文本 链接 由 <a> 标 签 内 的 文字 指定 。 例 如 : 


<a href="mailto:wangmingming@163.com"> 给 王 明 明 发 邮件 </a> 


要 正确 地 使 用 电子 邮件 链接 ， 需 要 设置 好 发 送 电 子 邮 件 的 应 用 程序 ， 例 如 Outlook、 
Foxmail 等 。 

4. 其 他 链接 

其 他 链接 包括 下 载 链接 、 空 链接 以 及 脚本 链接 等 。 下 载 链接 指 的 是 超级 链接 的 href 指 
定 的 目标 资源 既 不 是 网 页 ， 也 不 是 锚 点 或 者 电子 邮件 的 地 址 ， 而 是 普通 的 文件 。 此 时 单 击 
超级 链接 时 ， 会 出 现 保存 文件 或 打开 文件 的 窗口 ， 选 择 保存 文件 即 可 将 文件 下 载 到 本 地 硬 
盘 ; 选择 打开 文件 会 打开 目标 资源 。 

空 链接 是 未 指派 的 链接 ， 即 没有 指定 链接 对 象 的 链接 。 空 链接 可 用 于 向 页 面 上 的 对 象 
或 文本 附加 行为 。 例 如 ， 可 以 向 空 链接 附加 一 个 行为 ， 以 便 在 指针 滑 过 该 链接 时 执行 相应 
的 操作 ， 一 般 需要 和 JavaScript 脚本 结合 使 用 。 可 以 使 用 <a hre 伍 "#"> 来 实现 空 链 接 ， 但 是 
对 于 这 种 空 链接 来 说 ， 如 果 用 户 单 击 了 空 链接 ， 页 面 会 自动 重 置 到 页 首 ， 从 而 影响 用 户 的 
正常 浏览 。 还 可 以 通过 指定 <a> 标 签 的 href 属性 值 为 javascript:; (javascript 后 带 一 个 冒号 
和 分 号 ) 来 实现 空 链接 ， 这 种 空 链接 不 存在 重 置 页 面 至 页 首 的 问题 。 

脚本 链接 指 的 是 直接 将 超级 链接 的 href 属性 值 设置 成 JavaScript 脚本 或 者 JavaScript 
函数 。 当 单 击 超级 链接 时 ， 即 执行 相应 的 脚本 或 函数 。 脚 本 链接 非常 实用 ， 能 够 在 不 离开 
当前 页 面 的 情况 下 为 访问 者 提供 有 关 项 的 附加 信息 。 脚 本 链接 还 可 用 于 在 访问 者 单 击 特定 
项 时 ， 执 行 计算 、 验 证 表单 或 其 他 的 处 理 任务 。 例 如 ，scriptLink.html。 

scriptLink.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 脚 本 链接 </title> 
</head> 
<body> 
<a href="javascript:alert (' 我 是 警告 框 ! ') ;"> 弹 出 警告 框 </a> 
</body> 
</html> 


scriptLink.html 的 显示 结果 如 图 1-15 所 示 ， 单 击 “ 弹 出 警告 框 ” 会 显示 警告 窗口 。 
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图 1-15 scriptLink.html 的 显示 结果 


1.5.9 表格 


使 用 表格 可 以 使 网 页 上 显示 的 信息 更 有 条 理性 ， 在 HIMLS 中 可 以 使 用 表格 来 组 织 结 
构 化 的 信息 。 另 外 ， 在 HTML5 中 也 可 以 使 用 表格 来 进行 页 面 布局 。 一 个 完整 的 表格 由 一 
对 <table> 标 签 来 定义 。 每 个 表格 均 有 若干 个 单元 行 〈 由 一 对 <tr> 标 签 定义 ) 组 成 ， 每 个 单 
元 行 由 若干 个 单元 格 〈 由 一 对 <td> 标 签 定义 ) 组 成 。 表 格 内 的 具体 信息 放置 在 单元 格 中 。 
单元 格 可 以 包含 文本 、 图 像 、 列 表 、 段 落 、 表 单 、 水 平 线 以 及 表格 等 。 表 格 的 定义 格式 
如 下 : 

<table> 

<tr> 


<td> 单 元 格 内容 </td> 
<td> 单 元 格 内 容 </td> 


> 
</table> 


在 HTML4.01 中 ， 可 以 使 用 <table> 标 签 的 属性 设置 表格 的 显示 样式 ， 例 如 border、 
cellpadding、cellspacing 等 。 但 是 在 HIMLS 中 仅 支 持 <table> 标 签 的 border 属性 ， 并且 只 多 
许 属性 值 " "或 "1"," "表示 表格 单元 周围 没有 边框 ， 不 允许 用 于 布局 目的 ，"1" 表 示 在 表格 
单元 周围 添加 边框 ， 允 许 用 于 布局 目的 。 

从 结构 上 来 看 ， 表 格 可 以 分 成 表 头 、 主 体 和 表 尾 3 个 部 分 ， 分 别 使 用 <thead> 
<tbody><tfoot> 标 签 来 表示 。 可 以 用 <caption> 定 义 表格 的 标题 。 一 张 表 格 只 能 有 一 个 表 头 和 
表 尾 ， 但 可 以 有 多 个 主体 。 对 于 大 型 的 表格 来 说 ， 应 该 使 <tfoof> 出 现在 <tbody> 的 前 面 ， 这 
样 浏览 器 在 显示 数据 时 ， 有 利于 加 快 表格 的 显示 速度 。 另 外 在 <thead><tbody><tfoof> 标 签 
内 部 都 必须 使 用 <tr> 标 签 。 使 用 <thead><tbody><tfoof> 对 表格 进行 结构 划分 的 好 处 是 可 以 先 
显示 <tbody> 的 内 容 ， 而 不 必 等 整个 表格 下 载 完 成 后 才能 显示 。 无 论 <thead><tbody><tfoot> 
的 顺序 如 何 改变 , <thead> 的 内 容 总 是 在 表格 的 最 前 面 , <tfoot> 的 内 容 总 是 在 表格 的 最 后 面 。 
例如 ，tablel.html。 

tablel.html: 


tablel.html 的 显示 结果 如 图 1-16 所 示 。 
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图 1-16 table1.html 的 显示 结果 


如 果 表 格 中 只 有 一 个 <tbody>， 则 可 以 省 略 对 表格 结构 的 划分 ， 例 如 ，table2.html。 
table2.html: 
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<td colspan="3" align="center"> 这 里 是 表 尾 </td> 
< tr> 
</table> 
</body> 
</html> 


table2.html 的 显示 结果 如 图 1-16 所 示 。 与 表格 相关 的 元 素 或 标签 如 表 1-6 所 示 。 
表 1-6 表格 相关 的 元 素 


元 素 说 明 

<table> 表格 的 最 外 层 标记 ， 代 表 一 个 表格 

<tr> 单元 行 ， 由 若干 单元 格 横向 排列 组 成 

<td> 单元 格 ， 包 含 表格 数据 

<th> 单元 格 标题 ， 与 td 作用 相似 ， 但 一 般 作 为 表 头 行 的 单元 格 
<thead> 表 头 分 组 

<tfoot> 表 尾 分 组 

<tbody> 表格 主体 分 组 

<colgroup> 对 列 进行 组 合 ， 以 便 格式 化 ， 只 在 table 标签 中 有 效 
<caption> 表格 标题 


对 于 不 规则 的 单元 格 来 说 ， 有 的 单元 格 需 要 跨越 多 行 或 跨越 多 列 ，<td> 以 及 <th> 标 签 
具有 colspan 和 rowspan 两 个 属性 。colspan 指 当前 单元 格 水 平方 向 跨越 的 单元 格 数 ， 取 值 
为 正 整数 ， 代 表 此 单元 格 水 平 延伸 的 单元 格 数 或 跨越 的 列 数 。rowspan 指 的 是 当前 单元 格 
重 直 方向 跨越 的 单元 格 ， 取 值 为 正 整数 ， 代 表 此 单元 格 垂直 延伸 的 单元 格 数 或 跨行 数 。 例 
如 ，table3.html 。 

table3.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 不 规则 表格 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>1</td> 
<td rowspan="3"> 此 单元 格 跨 三 行 </td> 
<td>2</td> 
<td>3</td> 
EPE 
<tr> 
<td>4</td> 
<td>5</td> 
<td>6</td> 
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EPS 

<tr> 
<td>7</td> 
<tqd colspan="2"> 此 单元 格 跨 两 列 </td> 

SPAEr> 

</table> 
</body> 
</html> 


table3.html 的 显示 结果 如 图 1-17 所 示 。 


/ D mu x 


| GC 个 10 1270018. 人 | : | 


3 


国 国 加] 


此 单元 格 跨 三 行 |5 
出 


6 
单元 格 跨 两 列 


图 1-17 table3.html 的 显示 结果 


在 HIML4.01 中 ，<th> 和 <td> 标 签 除了 colspan 和 rowspan 属性 之 外 ,还 有 一 些 其 他 的 
属性 ， 但 在 HIML5 中 只 支持 colspan 和 rowspan 属性 。 

如 果 单 元 格 的 内 容 为 空 ， 可 能 会 影响 到 单元 格 的 显示 。 要 想 使 空 的 单元 格 正常 显示 ， 
可 以 为 空 单元 格 添加 一 个 空格 (&nbsp; )。 


小 结 


Web 主要 包括 超 文本 传输 协议 (HTTP)、 统 一 资源 定位 符 (URL) 以 及 超 文 本 标记 
语言 (HIML )。 

HTTP 是 客户 端 和 服务 器 端 信息 交互 的 网 络 协议 ，URL 是 网 络 上 的 资源 的 唯一 的 标 
识 符 ， 即 俗称 的 网 址 。 

HTMLS5 包含 许多 基本 的 标签 元 素 , 主要 有 <p><br /><ul><ol><a><table><tr><td> 等 。 
文本 、 图 像 、 超 级 链接 是 网 页 的 3 类 基本 元 素 。 

HTML5 新 增 的 元 素 包 括 结构 元 素 和 功能 元 素 。 

HTML5 废除 了 一 些 过 时 的 元 素 ， 例 如 能 够 被 CSS 代替 的 元 素 、frame 框架 等 。 
HTML5 中 新 增 的 属性 包括 表单 属性 、 链 接 属性 和 其 他 属性 。 


习题 


直列 ) 为 换行 符 。 


A. <span> 
B. <div> 
C. <br /> 
苞 ， <p> 
下 列 ( 
A. self 
B. blank 
C. top 
D. parent 
3， 以 下 标记 中 可 以 单独 使 用 的 是 六 
A. <body> 
也 .<br /> 
C. <html> 
D. <title> 
4. <meta> 标 签 的 作用 是 Ys 
A. 用 于 设置 HTML 文档 的 格式 
B. 用 于 设置 HTML 文档 的 信息 
C. 用 于 实现 本 页 的 自动 刷新 
D. 以 上 都 不 对 
5. HTML 文档 的 正文 部 分 的 开始 标记 是 
6. 网 页 中 3 种 最 基本 的 组 成 元 素 为 〈 
页 面 元 素 是 其 下 )、( )。 


)、 


( 


) 为 在 新 窗口 中 打开 目标 资源 文件 。 
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)， 结 束 标记 是 (。 )。 
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)， 网 页 中 最 基本 的 3 种 


7. 在 创建 超级 链接 时 ， 相 对 路 径 和 绝对 路 径 的 使 用 有 什么 区 别 ? 


8， 举例 说 明 列 表 标 签 如 何 嵌 套 使 用 。 


表单 | 


6 form 标签 


表单 是 一 个 容器 ， 用 来 收集 客户 端 要 提交 到 服务 器 端的 信息 。 客 户 端 将 信息 填写 在 表 
单 中 的 控件 中 。 当 单 击 表单 中 的 提交 按钮 时 ， 表 单 中 包含 的 控件 的 信息 就 会 被 提交 给 表单 
的 action 属性 所 指定 的 处 理 程序 。 表 单 的 使 用 非常 广泛 ， 是 网 页 上 用 于 输入 信息 的 区 域 ， 
例如 ， 向 文本 框 中 输入 文字 、 在 选项 框 里 进行 选择 等 。 从 表单 的 设计 到 服务 器 返回 处 理 结 
果 的 流程 包括 : 

。 通过 表单 控件 来 设计 表单 ; 

。 通过 浏览 器 将 表单 呈现 给 客户 端 ; 

。 客户 端 填写 相关 的 信息 ， 并 单 击 表单 中 的 提交 按钮 ， 将 表单 提交 给 处 理 程序 ; 

。 服务 器 处 理 完 表单 后 ， 将 生成 的 结果 返回 给 客户 端 浏览 器 。 

<form> 标 签 用 于 创建 提供 用 户 输入 信息 的 表单 ，<form> 元 素 可 以 包含 一 个 或 多 个 表单 
控件 元 素 。HTMLS5 中 废除 了 <form> 标 签 的 name 属性 ， 使 用 id 属性 代替 ， 同 时 新 增 了 一 
些 属性 。 其中, autocomplete 属性 规定 是 否 启 用 表单 的 自动 填充 功能 , 可 取 值 "on" 或 者 "off'。 
如 果 使 用 novalidate 属性 ， 则 提交 表单 时 不 进行 验证 。 


@2 HTML5 中 新 增 的 input 元 素 


在 HIMLS 出 现 之 前 ，HTML 表单 中 的 表单 控件 包括 文本 框 、 按 钮 、 单 选 按 钮 、 复 选 
框 等 ， 如 表 2-1 所 示 。 
表 2-1 HTML4.01 中 的 input 元 素 


类 型 HTML 代码 及 说 明 
单行 文本 域 <input type= "text"> 

单 选 按钮 <input type="radio"> 

复 选 框 <input type="checkbox"> 


下 拉 列 表 <select><option> 


续 表 
类 型 HTML 代码 及 说 明 
密码 框 <input type="password"> 
提交 按钮 <input type="submit"> 
重 置 按钮 <input type="reset"> 
普通 按钮 <input type="button"> 
滚动 文本 框 <textarea> 
图 像 按钮 <input type="image"> 
隐藏 域 <input type="hidden"> 
文件 域 <input type="file"> 


例如 ，forml.html， 包 含 了 以 上 各 个 控件 的 使 用 ， 为 了 更 好 地 演示 表单 的 作用 ， 此 处 
用 到 了 动态 处 理 程序 JSP， 有 关 JSP 的 知识 ， 读 者 可 以 参照 相关 资料 ， 此 处 暂 不 作 介绍 。 
forml.html 中 的 表单 提交 给 forml_ok.jsp 处 理 ,form]_ok.jsp 显示 用 户 在 表单 中 填写 的 信息 。 
forml.html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 表 单 使 用 示例 1</title> 
</head> 
<body> 
<form id="forml" action="forml ok.jsp" method="post"> 
<table border="1"> 
> 
<td> 姓 名 </td> 
<td><input type="text" name="name" /></td> 
= 
<tr> 
<td> 密 码 </td> 
<td><input type="password" name="password" /></td> 
ER 区 
<Er> 
<td> 性 别 </td> 
<td><input type="radio" name="gender" value="male" checked/> 
男 <input type="radio" name="gender" value="female" /> 女 </td> 
/EE 
<tr> 
<tq> 爱 好 </td> 
<td><input type="checkbox" name="hobby" value="swimming" /> 
游泳 <br /> 
<input type="checkbox" name="hobby" value="reading" /> 
读书 <br /> <input type="checkbox" name="hobby" value= 
"music" /> 音乐 </td> 


SY 
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</tr> 
<tr> 
<td colspan="2"><input type="submit" value=" 提 交 " />&nbsp; gnbsp; 
<input type="reset" value=" 重 置 " /></td> 

Xi 六 

</table> 

</form> 
</body> 
</html> 


forml] ok.jsp: 


<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 表 单 使 用 示例 1- 显 示 表 单 内 控件 的 值 </title> 
</head> 
<body> 
<S 
String name = request.getParameter ("name"); 
String password = request.getParameter ("password"); 
String gender = request.getParameter ("gender"); 
String[] hobby = request.getParameterValues ("hobby"); 
out.print ("name:" + name + "<br />"); 
out.print ("password:" + password + "<br />"); 
out.print ("gender:" + gender + "<br />"); 
if (hobby != null) { 
out.print ("hobby:"); 
for (int i = 0; i < hobby.length; i++) { 
out.print (hobby[i] + ™ "); 
} 
} 
%> 
</body> 
</html> 


要 验证 forml.html 及 forml_okjsp 的 显示 结果 ， 需 要 将 其 部 署 到 Java Web 服务 器 上 ， 
在 浏览 器 的 地 址 栏 里 输入 http://localhost:8080/ch02/form1l.html， 填 写 完 相应 的 信息 后 的 显 
示 结 果 如 图 2-1 所 示 ， 单 击 “ 提 交 ” 按 钮 之 后 的 显示 结果 如 图 2-2 所 示 。 


「 国 蔬 呈 丁 司 | 


/ 因 志 单 全 RHFL x 
€ > C 人 [Oocnoste.o 女 | : 


| 星 名 ||wangmingming Lv-- - 
i es C 全 |@ locaost9.，o 女 
性 别 | 四 男 目 女 name-wangmingming 
回 游泳 password:123456 
| 爱好 | 回 读书 gender-male 
目 音 hobby:swimming reading 
提交 | | 重 置 | 
图 2-1 form1.html 中 表单 填充 完 后 的 显示 结果 图 2-2 提交 表单 之 后 的 显示 结果 


2.2.1 email 类 型 


email 类 型 的 input 元 素 是 专门 用 于 输入 E-mail 地 址 的 文本 输入 框 , 在 提交 表单 时 , 会 
自动 验证 email 输入 框 的 值 。 如 果 值 无 效 ， 则 不 允许 提交 表单 。 例 如 ，email.html， 当 输入 
的 地 址 不 符合 email 的 格式 要 求 时 ， 会 给 出 相应 提示 ， 如 图 2-3 所 示 。 

email.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>email 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="email ok.jsp"> 
请 输入 E-mail 地 址 :<input type="email" name="email" /><br /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


€ > C 个 |@Iocahosteogoc. 女 | : 


请 输入 E-mail 地 址 bc1239 


Submit 


加 Please include an 
'@' in the email 
address. abc1234' 
is missing an '@". 


2-3 email 类 型 的 input 元 素 示例 


Ny 
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2.2.2 Url 类 型 


url 类 型 的 input 元素 专门 用 于 输入 url 地 址 ， 当 提交 表单 时 ， 如 果 输 入 的 内 容 符 合 url 
地 址 格式 ， 则 允许 提交 表单 ;如 果 不 符合 地 址 格式 ， 则 不 允许 提交 表单 ， 并 且 会 给 出 相应 
的 提示 。 例 如 ，urLhtml， 当 输入 的 内 容 是 www.sina.com.cn 时 , 漏 掉 了 协议 类 型 ， 如 http://， 
显示 结果 如 图 2-4 所 示 。 

url.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>url 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="url ok.jsp"> 
请 输入 url 网 址 : <input type="url" name="url" /><br /> <input type= 
"submit" /> 
</form> 
</body> 
</html> 


国 ur 尖 型 的 使 用 x WN 5 


ocamostsoo0ycn 文 芽 


请 输入 ur 网址; |www sina com_cn 
Submit 
四 Please enter a URL. 


2-4 ”url 类 型 的 input 元 素 示例 


2.2.3 number 类 型 


number 类 型 的 input 元 素 提供 用 于 输入 数值 的 文本 框 ， 只 能 输入 数值 类 型 的 值 。 可 以 
设 定 对 输入 数字 的 限制 , 例如 允许 的 最 大 值 、 最 小 值 、 合法 的 数字 间隔 或 者 默认 值 等 max 
属性 指定 允许 的 最 大 值 ，min 属性 指定 允许 的 最 小 值 ，step 指定 默认 的 数字 间隔 ，value 指 
定 默认 值 。 如果 输入 的 数值 不 符合 以 上 限定 ， 则 不 允许 提交 表单 ， 并 给 出 相应 提示 。 例 如， 
number.html。 

number.html: 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>number 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="number ok.jsp"> 
请 输入 数值 : <input type="number" name="number" max="100" min="20" 
value="50" /><br /> 
<input type="submit" /> 
</form> 
</body> 


</html> 


数值 输入 框 的 默认 值 为 50， 如 图 2-5 所 示 。 
当 输 入 的 数值 小 于 允许 的 最 小 值 20 时 ， 显 示 结果 如 图 2-6 所 示 。 


< > CO [Dreamonm. al 
请 输入 数值 ， 
[Submit | 


€ CO |Olocalhost.. 女 
Ee 一 一 四 Value must be 
请 输入 数值 ，|50 greater than or 


Submit equal to 20. 


图 2-5 数值 输入 框 的 默认 值 图 2-6 数值 输入 框 值 无 效 的 提示 1 
当 输 入 的 数值 大 于 允许 的 最 大 值 时 ， 显 示 结 果 如 图 2-7 所 示 。 


< > C 全 [Oocnosso. | : 
请 输入 数值， 
LSubmit | 


四 Value must be 
less than or 
equal to 100. 


2-7 ”数值 输入 框 值 无 效 的 提示 2 


NA 


Ng 
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2.2.4 range 类 型 


Iange 类 型 的 input 元 素 用 于 输入 一 定 范围 内 的 数字 值 的 文本 框 ， 在 网 页 中 显示 为 滑动 
条 。 可 以 对 可 接受 的 数字 进行 限制 ， 例 如 ， 可 以 使 用 max 设置 允许 使 用 的 最 大 值 ， 使 用 
min 设置 允许 使 用 的 最 小 值 ， 使 用 step 设置 合法 的 数字 间隔 以 及 使 用 value 设置 默认 值 ， 
Iange 类 型 与 number 类 型 非常 类 似 ， 只 是 外 观 不 同 。range 类 型 的 input 元 素 在 不 同 的 浏览 
器 中 的 外 观 不 同 ， 例 如 ，range.html， 其 在 Chrome 浏览 器 中 的 显示 效果 如 图 2-8 所 示 。 
range.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" UTE 8"> 
<title>range 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="range ok.jsp"> 
请 选择 数值 : <input type="range"name="range"max="100"min="20"value="60"/> 
<br/> 
<input type="submit" /> 
</form> 
</body> 
</html> 


leslie 
/ 国 ange 汪 型 的 人 x WN 


€ >C 人 HIOahost. 女 


请 选择 数值 ， 目 
Submit 


图 2-8 range 类 型 的 input 元 素 在 Chrome 浏览 器 中 的 显示 效果 


2.2.5 ”Date pickers 类 型 


Date pickers 类 型 指 的 是 日 期 选择 器 ， 是 网 页 中 经 常 使 用 的 一 种 控件 。 在 HIMLS 之 前 
的 版 本 中 并 没有 支持 任何 形式 的 日 期 选择 器 ， 如 果 要 实现 日 期 的 选择 只 能 使 用 JavaScript 
实现 ， 较 为 烦琐 。HTML5 提供 了 多 个 用 于 选取 日 期 和 时 间 的 输入 类 型 ， 具 体 包括 : 

e date 选取 日 、 月 、 年 。 

。 month 一 一 选取 月 和 年 。 
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选取 周 和 年 。 

e time 选取 时 间 (小 时 和 分 钟 )。 

。 datetime 一 一 选取 时 间 、 日 、 月 、 年 (UTC， 世 界 标准 时 间 )。 
选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 


®。 Week 


e datetime-local 

1. date 类 型 

date 类 型 的 日 期 选择 器 用 于 选取 日 、 月 、 年 ， 即 选择 一 个 具体 的 日 期 ， 如 2018 年 5 
月 22 日 ， 选 择 的 日 期 会 以 2018-5-22 的 形式 显示 。 例 如 ，date html。 

date.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTE 8"> 
<title>date 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="date ok.jsp"> 
请 选择 日 期 : <input type="date" name="date" /> <input type="submit" /> 
</form> 
</body> 


</html> 


date.html 在 Chrome 浏览 器 中 的 显示 效果 如 图 2-9 所 示 。 


ck 呈 :| 加 


] 国 date 的 全 用 x\ 


€ CG OO |© Iocalhost9090/choz/dat… 全 | :} 


请 选择 日 期 : | 画 /22/2018 x $v|| Submit | 


May, 2018 ~ 


Sun Mon 


2-9 date 类 型 的 input 元 素 在 Chrome 浏览 器 中 的 显示 效果 


2. month 类 型 

month 类 型 的 日 期 选择 器 用 于 选取 月 、 年 ， 即 选择 一 个 具体 的 月 份 ， 如 2018 年 5 月 ， 
则 获取 的 元 素 的 值 为 2018-05。 例 如 ，month.html， 其 在 Chrome 浏览 器 中 的 显示 效果 如 图 
2-10 所 示 ， 由 图 可 见 ,整个 月 份 中 的 日 期 都 以 深 灰 色 显示 , 单 击 该 区 域 可 以 选择 整个 月 份 。 

month.html: 


NY 


No 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>month 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="month ok.jsp"> 


请 选择 日 期 : <input type="month" name="month" /> <input type="submit" /> 


</form> 
</body> 
</html> 
Tr na 蕊 Ex | 
国 month 关 型 的 使 用 x 
€ GC 合 | © localhost:9090/ch02/m...， 食 
请 选择 日 期 ， | 醋 ，2eas x$ v|| Submit | 
May 2018 ~ 加 | 加 | 区 
Sun Mon Tue Wed Thu Fri Sat 
CS 
0 1 
13 14 15 1 1 18 19 
20 21 2 23 24 25 26 
27 28 29 30 31 
J 
图 2-10 month 类 型 的 input 元 素 在 Chrome 浏览 器 中 的 显示 效果 
3. week 类 型 


week 类 型 的 日 期 选择 器 用 于 选择 周 和 年 ， 如 2018 年 第 21 周 ， 选 择 以 后 元 素 的 值 会 以 


2018-21 的 形式 显示 。 例 如 ，week.html， 其 显示 效果 如 图 2-11 所 示 ， 左 侧 为 周 数 ， 右 侧 为 日 期 。 
week.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title>week 类 型 的 使 用 </title> 
</head> 


<body> 
<form method="post" action="week ok.jsp"> 
请 选择 日 期 : <input type="week" name="week" /> <input type="submit" /> 
</form> 
</body> 
</html> 
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Eels)| 


/ 国 weeksk 型 的 使 用 x “| 
所 C 合 |@ localhost:9090/ch02/weekhtml 侈 


请 选择 日 期 : |week 到 ,2018 x$v|| Submit 


May, 2018 ~ 


Week |Sun Mon Tue Wed Thu Fri Sat 
18 | 2 3 4 5 
19 6 7 8 9 10 1f 12 


2-11 ”week 类 型 的 input 元 素 的 显示 效果 


4. time 类 型 
time 类 型 的 input 元 素 用 于 选择 时 间 ， 可 以 具体 到 小 时 和 分 钟 ， 当 选择 06:08 PM 时 ， 


获取 的 input 元 素 的 值 为 18:08。 例 如 ，time.html， 其 显示 效果 如 图 2-12 所 示 。 
time.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTEF-0"> 
<title>time 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="time ok.jsp"> 
请 选择 时 间 : <input type="time" name="time" /> <input type="submit" /> 
</form> 
</body> 
</html> 


加 百名 
国 time 尖 型 的 EF x 也 


人 加 从 [Ce 


请 选择 时 间 ， Submit 


图 2-12 time 类 型 的 input 元 素 的 显示 效果 


5. datetime 类 型 
datetime 类 型 的 日 期 选择 器 用 于 选择 时 间 、 上 日、 月、 年， 其 中 时 间 为 UTC 时间。 大 部 
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分 浏览 器 不 支持 datetime 类 型 的 input 元 素 。 

6. datetime-local 类 型 

datetime-local 类 型 的 日 期 选择 器 用 于 选择 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 本 地 时 间 。 
例如 ，datetime-local.html， 其 显示 效果 如 图 2-13 所 示 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>datetime-local 类 型 的 使 用 </title> 
</head> 
<body> 


<form method="post" action="datetime-local ok.jsp"> 
请 选择 时 间 : <input type="datetime-local" name="datetime-local" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


国 datetime-local 类 型 的 使 F x > 


€ > C 合 |@ localhost9090/ch02/datetim... 安 | : 


请 选择 时 间 : | 国 /23/2018 66:68 Pm x | Submit] 


May 2018 ~ Le 


Sun Mon Tue 


6 
13 
20 
27 


2-13 ”datetime-local 类 型 的 input 元 素 的 显示 效果 
2.2.6 search 类 型 


search 类 型 的 input 元 素 用 于 输入 搜索 关键 词 的 文本 框 。search 类 型 提供 的 搜索 框 不 只 
是 百度 或 者 Google 的 搜索 框 ， 而 是 任意 网 页 中 的 任意 一 个 搜索 框 。 例 如 ，search html， 在 
搜索 框 中 输入 文字 后 ， 右 侧 会 出 现 一 个 “XxX ”按钮 ， 单 击 此 按钮 会 清空 搜索 框 的 内 容 ， 如 
图 2-14 所 示 。 如 果 之 前 在 搜索 框 内 输入 过 信息 ， 会 出 现 提示 信息 ， 如 图 2-15 所 示 。 
search.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>search 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="search ok.jsp"> 
请 输入 搜索 关键 词 : <input type="search" name="search" /> 
<input type="submit" /> 


</form> 
</body> 
</html> 
二 -全 [ET 
国 search 关 型 的 使 用 x 全 
[EEC I 二 
/ 国 search 类 型 的 使 用 x\W € > C 合 |@ localhost9090/ch02/searchh.. 家 | : 
€ > Q@ 个 | @OIocalhost9090/choz2/search. 请 输入 搜索 关键 词 ，| 春 x || Submit 


春日 
春 夜 喜 雨 


请 输入 搜索 关键 词 ，[ 春 时 | x|[ Submit | 


图 2-14 search 类 型 的 input 元 素 的 显示 效果 1 图 2-15 search 类 型 的 input 元素 的 显示 效果 2 
2.2.7 ”tel 类 型 


tel 类 型 的 input 元 素 是 专门 用 于 输入 电话 号 码 的 文本 框 ， 它 并 不 限定 只 能 输入 数字 ， 
因为 电话 号 码 中 也 包含 如 “+”“-” 等 字符 。 


2.2.8 ”color 类 型 


color 类 型 的 input 元 素 专门 用 于 设置 颜色 值 ， 单 击 文 本 框 时 ， 可 以 打开 拾 色 器 面板 ， 
用 户 可 在 其 中 进行 可 视 化 的 颜色 选择 。 当 选择 红色 时 ， 元 素 的 返回 值 以 杆 F0000 的 形式 呈 
现 。 例如，color.html， 其 显示 效果 如 图 2-16 所 示 。 不 同 的 操作 系统 的 拾 色 器 面板 的 显示 效 
果 会 有 所 不 同 ， 在 Windows 操作 系统 下 的 Chrome 浏览 器 中 的 显示 效果 如 图 2-17 所 示 。 
colorhtml: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>color 类 型 的 使 用 </title> 
</head> 
<body> 


NM 
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<form method="post" action="color ok.jsp"> 
请 选择 颜色 : <input type="color" name="color" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


加 四 至 
原因 -oeme x WW 
€ CO |©localhost9... 人 女 


请 选择 颜色 ， 


LSubmit | 


图 2-16 color 类 型 的 input 元 素 的 显示 效果 图 2-17 Windows 操作 系统 中 的 拾 色 器 


ks HTML5 中 新 增 的 表单 元 素 


2.3.1 datalist 元 素 


datalist 元 素 用 于 为 文本 框 提 供 一 个 可 供 选 择 的 列表 ， 用 户 既 可 以 选择 列表 中 的 内 容 ， 
也 可 以 在 文本 框 中 输入 内 容 。 如 果 要 把 datalist 元 素 绑 定 到 文本 框 中 ， 应 该 将 文本 框 的 list 
属性 值 设置 为 datalist 元 素 的 id 值 。datalist 元 素 的 列表 项 由 option 标签 指定 。 当 需要 用 户 
能 够 自由 输入 内 容 又 有 一 些 建议 选项 时 可 以 使 用 datalist 元 素 ， 如 果 选 择 了 datalist 元 素 中 
的 列表 项 ， 则 提交 表单 以 后 获取 的 文本 框 的 值 为 列表 项 的 值 。 例 如 ，datalist.html， 其 显示 
效果 如 图 2-18 所 示 。 

datalist.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>datalist 类 型 的 使 用 </title> 
</head> 
<body> 
<form method="post" action="datalist ok.jsp"> 


请 输入 HTML5 编辑 器 : <input type="text" 1ist="editor" name="myEditor" /> 
<datalist id="editor"> 
<option value="Dreamweaver CS6"> 
<option value="Nodepad++"> 
<option value="HBuilder"> 
<option value="Sublime Text"> 

</datalist> 
<input type="submit" /> 

</form> 

</body> 
</html> 


”i ET 
历 固 doorsesan 用  x\ 
€ > @G 个 |@Iocahost9ogo/choz/.， 女 | : 
请 输入 HTML5 编 辑 器 : 
Submit Dreamweaver CS6 


Nodepad++ 
HBuilder 


Sublime Text 


图 2-18 datalist 元素 的 显示 效果 


2.3.2 keygen 元 素 


keygen 元 素 是 密 钥 对 生成 器 ， 能 够 使 用 户 的 验证 更 可 靠 。 用 户 提交 表单 时 ， 会 生成 两 
个 键 : 一 个 私 钥 ， 一 个 公 钥 。 私 钥 会 被 存储 到 客户 端 ， 公 钥 被 发 送 到 服务 器 。 公 钥 可 以 用 
来 验证 用 户 的 客户 端 证 书 。 但 是 目前 各 类 浏览 器 对 keygen 元 素 的 支持 状况 并 不 理想 。 


2.3.3” output 元素 


output 元 素 用 于 在 浏览 器 中 显示 计算 结果 或 者 脚本 输出 ， 包 含 完整 的 开始 标签 和 结束 
标签 。output 元 素 的 for 属性 用 于 定义 输出 域 相关 的 一 个 或 多 个 元 素 ， 值 为 元 素 的 id 值 ， 
如 果 是 多 个 元 素 , 则 使 用 空格 隔 开 。 form 属性 用 于 指定 output 元 素 所 属 的 一 个 或 多 个 表单 ， 
name 属性 为 对 象 的 唯一 标识 ， 表 单 提交 时 用 于 获取 元 素 的 值 。 例 如 ，outputhtml， 完 成 两 
个 range 类 型 的 input 元 素 的 值 求 和 ， 当 range 类 型 的 input 元 素 的 值 发 生变 化 或 者 文本 框 
内 的 值 发 生变 化 时 ，output 元 素 会 显示 二 者 求 和 之 值 ， 其 显示 效果 如 图 2-19 所 示 。 本 例 中 
使 用 了 部 分 JavaScript 脚本 ， 关 于 JavaScript 后 面 会 有 详细 介绍 。 

output.html: 


MY 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>output 元 素 的 使 用 </title> 
</head> 
<body> 
<form oninput="result.value=parseInt (a.value)+parseInt (b.value) "> 
0 <input type="range" id="a" value="50" max="100" min="0">100 + 
<input type="number" id="b" value="50"> = 
<output name="result" for="a b"></output> 
</form> 
</body> 
</html> 


y 园 output 元 素 的 使 用 


和 《 GC OO | © Ilocalhost9090/choz2/outputhtml 人 女 


0 目 100 +90 |= 160 


图 2-19 ”output 元 素 的 显示 效果 


小 结 


。 表单 是 一 个 容器 ， 用 来 收集 客户 端 要 提交 到 服务 器 端的 信息 。 客 户 端 将 信息 填写 在 
表单 中 的 控件 中 。 

。 在 HIML5 之 前 ， 表 单 中 包含 的 表单 控件 主要 有 单行 文本 框 、 密 码 框 、 按 钮 、 单 选 
按钮 、 复 选 框 、 下 拉 列 表 、 提 交 按 钮 、 重 置 按 钮 、 滚 动 文本 框 、 文 件 域 、 图 像 域 、 

。 HTMLS5 中 新 增 的 input 元 素 主 要 有 email、url、number、range、Date pickers、 search、 
tel、color 等 类 型 。 

。 HTML5 中 新 增 的 其 他 表单 元 素 有 datalist、keygen、output 元 素 等 。 


题 


AY| 


1. 要 求 用 户 输入 留言 内 容 ， 应 选用 表单 控件 ( )5 
A. 单行 文本 框 
B. 选择 列表 
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C. 单 选 按钮 
D. 滚动 文本 框 
2. 要 求 用 户 输入 电子 邮件 地 址 ， 应 选用 表单 控件 总 
A. email 
B. url 
CG.. 
D. date 
3. 表单 的 ( ) 属性 用 来 指定 处 理 表 单 的 程序 。 


A. action 


B. process 
C. method 
D. id 
4. 表单 的 ( ) 属性 用 来 指定 提交 表单 的 方法 。 
A. action 
B. method 
C. name 
D. id 
5， 如 果 要 发 起 调查 ， 请 用 户 选择 自己 喜欢 的 运动 方式 ， 应 该 使 用 表单 控件 〈 % 
A. 文本 框 
B. 单 选 按 钮 
C. 复 选 框 
D. 滚动 文本 杠 
6. 表单 中 包含 了 各 种 类 型 的 )， 例 如 文本 框 和 按钮 ， 可 用 于 接收 访问 者 输入 的 
信息 。 
A， 隐藏 元 素 
B. 标签 
C. 表单 控件 
D. legend 元 素 
7， 如 果 浏 览 器 不 支持 新 的 HIMLS 表单 控件 ， 那 么 会 发 生 〈 )。 
A. 关机 
B. 浏览 器 报错 
C. 浏览 器 崩溃 
D. 浏览 器 将 显示 一 个 输入 文本 框 
8. 表单 对 象 的 名 称 由 ( ) 属性 设 定 ， 提 交 方法 由 ) 属性 设 定 ， 处 理 表单 
的 程序 由 ) 属性 设 定 。 
9. 表单 是 ( ) 和 ) 之 间 实 现 信息 交流 和 传递 的 桥梁 。 
10. HTMLS5 新 增 了 哪些 表单 元 素 ? 
11. 设计 一 个 表单 ， 要 求 使 用 5 种 以 上 的 表单 控件 。 


HTML5 画布 | 


HITML5 画布 即 HIMLS canvas， 是 现代 浏览 器 都 支持 的 HIML5 非 插件 绘图 的 功能 。 
HIML5 canvas 是 HIMLS 新 增 的 专门 用 于 绘制 图 形 的 元 素 。 在 页 面 上 放置 一 个 canvas 元 
素 就 相当 于 放置 了 一 块 画 布 ， 可 以 在 其 中 进行 图 形 的 绘制 。 在 canvas 元 素 内 绘制 图 形 需要 
结合 JavaScript 脚本 。 利 用 canvas 可 以 进行 跨 平 台 的 动画 和 游戏 的 开发 ， 能 够 实现 对 图 像 
进行 像素 级 别 的 操作 。 


6 HTML5 的 Canvas 元 素 


canvas 元 素 的 外 观 与 img 元 素 相 似 ， 但 是 没有 img 元 素 的 src 属性 和 alt 属性 。canvas 
元 素 的 height 属性 和 width 属性 分 别 用 来 设置 画布 的 高 度 和 宽度 ， 单 位 是 像素 (px)。 默 认 
的 画布 高 度 是 150px、 宽 度 是 300px。id 属性 为 canvas 元 素 的 标识 ,在 JavaScript 脚本 中 需 
要 根据 id 值 来 寻找 canvas 元 素 。<canvas> 标 签 必须 成 对 使 用 。 默 认 的 canvas 元 素 在 页 面 
上 会 显示 一 块 空白 的 没有 边框 的 矩形 。 可 以 通过 CSS 来 设置 canvas 元 素 的 外 观 ， 例 如 ， 
canvas.html， 为 canvas 元 素 添加 一 个 实心 的 边框 ， 宽 度 为 3px。 
canvas.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>canvas 元 素 示例 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="200" height="50" style="border:3px solid"> 
</canvas> 
</body> 
</html> 


canvas.html 的 显示 效果 如 图 3-1 所 示 。 
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3-1 canvas 元 素 在 Chrome 浏览 器 中 的 显示 效果 


kz 绘制 简单 图 形 


canvas 元 素 本 身 并 不 能 实现 图 形 绘制 , 需要 和 JavaScript 脚本 结合 起 来 ,首先 ,给 canvas 
元 素 添加 一 个 id 属性 , 在 JavaScript 脚本 中 通过 id 属性 寻找 对 应 的 canvas 元 素 。 然 后 通过 
canvas 元 素 的 getContext() 方 法 获取 其 上 下 文 ， 即 创建 Context 对 象 ， 以 获取 允许 进行 绘制 
的 2D 环境 。 最 后 通过 Context 对 象 的 相关 方法 完成 绘制 ， 例 如 fllStyle0 方 法 、fillRectO 
方法 等 。 

进行 绘制 时 ， 需 要 指定 确定 的 坐标 位 置 ， 坐 标 原点 (0.0) 位 于 canvas 的 左上 角 ，x 轴 水 
平方 向 向 右 延 伸 ，y 轴 垂 直 向 下 延伸 ， 如 图 3-2 所 示 。 


(0.0) 


3-2 ”canvas 元 素 的 坐标 


3.2.1 绘制 直线 


Context 对 象 的 moveTo(x, y) 方 法 是 将 画笔 移动 到 指定 的 坐标 点 (x, y)，lineTo(x, y) 方 法 
是 从 落笔 点 绘制 路 径 到 坐标 点 (x, y)。 只 使 用 以 上 两 个 方法 是 无 法 在 画布 上 看 到 直线 的 ,使 
用 lineTo(x, y) 方 法 绘制 路 径 ， 要 使 路 径 在 画布 上 显示 出 来 ， 还 需要 进行 描 边 。 可 以 连续 绘 
制 多 条 路 径 ， 然 后 使 用 stroke() 方 法 一 次 性 描 边 。 可 以 使 用 CSS 设置 绘制 直线 的 样式 ， 例 
如 ，line.html。 

line.html: 


No 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 绘 制 直线 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="150" height="150" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context.moveTo(0, 0); 
context.lineTo(150, 150); 
context.moveTo(0, 150); 
context.lineTo(150, 0); 
Context .stroke (); 
</script> 
</html> 


line.html 在 浏览 器 中 的 显示 效果 如 图 3-3 所 示 。 


人 eile)| 
// 口 绘制 直线 x 全 


C 个 |0 127001802 女 | : | 


图 3-3 line.html 的 显示 效果 


3.2.2 ”绘制 矩形 


canvas 元 素 可 以 绘制 两 种 矩形 : 一 种 是 填充 矩形 ， 另 一 种 是 矩形 轮廓 。Context 对 象 的 
flRectO 方 法 用 来 绘制 填充 矩形 ，strokeRect( 方 法 用 来 绘制 矩形 轮 廊 。 

fillRect() 方 法 的 前 两 个 参数 为 矩形 的 左上 角 的 坐标 , 后 两 个 参数 为 矩形 的 宽度 和 高 度 。 
strokeRect() 方 法 的 参数 与 包 IRect() 方 法 的 参数 含义 相同 。 设置 矩形 的 外 观 可 以 使 用 fillStyle 
属性 和 strokeStyle 属性 。fillStyle 属性 用 来 设置 矩形 区 域 的 填充 颜色 ，strokeStyle 属性 用 来 
设置 矩形 轮廓 的 颜色 。 例 如 ，recthtml， 绘 制 一 个 填充 矩形 、 一 个 矩形 轮廓 。 


第 3 章 HTML5 画布 


rect.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 绘 制 矩 形 < 人 title> 
</head> 
<body> 
<canvas id="myCanvas" width="200" height="150" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context .fillstyle="green"; 
context .fillRect (20, 20,100, 80); 
Context .strokestyle="red"; 
context.strokeRect (50, 50,100,40); 
</script> 
</html> 


rect.html 在 浏览 器 中 的 显示 效果 如 图 3-4 所 示 。 
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图 3-4 rect.html 的 显示 效果 


3.2.3 ”绘制 圆 或 圆 弧 


canvas 元 素 可 以 用 来 绘制 圆 或 圆 扳 ， 方 法 有 beginPath()、arc()、closePath()、fill()。 

1. beginPath() 

开始 一 条 路 径 或 重 置 路 径 ; 

2. arc(x, yn sAngle, eAngle, counterclockwise) 

X、y 为 圆心 的 坐标 ，z 为 圆 的 半径 ，sAngle 为 以 弧度 计 的 起 始 角 ，eAngle 为 以 弧度 计 
的 结束 角 ，counterclockwise 参数 可 选 ， 规 定 逆 时 针 或 顺 时 针 绘 图 ，true 为 逆 时 针 ，false 为 
顺 时 针 。 
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3. closePath() 

闭合 路 径 ， 如 果 图 形 本 来 就 是 闭合 的 ， 则 此 方法 不 起 作用 。 
4. fill() 

填充 当前 的 路 径 或 图 像 ， 默 认 的 颜色 是 黑色 。 

例如 ，arc.html， 绘 制 一 个 圆 和 若干 条 圆 弧 。 

arc.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 绘 制 圆 或 圆 弧 </title> 
</head> 
<body> 


</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context .fillstyle="yellow"; 
context .beginPath () 7 
context.arc(150,100,50,0,Math.PI*2); 
context .closePath(); 
context .fi11(); 
for (Var i=0;i<20;i++){ 
Context .strokestyle="green"; 
context .beginPath() 7 
Context .arc(0,200,i*10,0,Math.PI*3/2,true); 
Context .stroke () 7 
</script> 
</html> 


arc.html 在 浏览 器 中 的 显示 效果 如 图 3-5 所 示 。 
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3-5 ”arc.html 的 显示 效果 
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<canvas id="myCanvas" width="300" height="200" style="border: 


1px solid"> 
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3.2.4 绘制 三 角形 


使 


triangle.html: 


<!DOCTYPE html> 
<html> 


<head> 
<meta charset="UTF-8"> 
<title> 绘 制 三 角形 </title> 
</head> 
<body> 


<canvas id="myCanvas" width="200" height="200" style="border:1lpx solid"> 


</canvas> 

</body> 

<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context .beginPath (); 
context .moveTo(20, 20); 
context.lineTo(40, 100); 
context.lineTo(180, 100); 
context .closePath () 
Context .stroke () 7 
context.fil1Style = "green"; 
context .fil1() 7 

</script> 


</html> 


triangle.html 在 浏览 器 中 的 显示 效果 如 图 3-6 所 示 。 
f | 

Du=sp x BS 
C OO 127001802( 女 


3-6 triangle.html 的 显示 效果 


绘制 路 径 的 方法 可 以 自由 绘制 出 三 角形 等 多 边 形 。 例 如 ，trianglehtml， 绘 制 一 个 
填充 色 为 绿色 的 三 角形 。 
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ks 绘制 文字 


可 以 使 用 fillText(0 方 法 和 strokeText() 方 法 来 绘制 文字 ， 其 中 flText() 方 法 用 来 绘制 填 
充 文字 ，strokeText() 方 法 用 来 绘制 轮廓 文字 。 


3.3.1 绘制 填充 文字 


绘制 填充 文字 时 ，fillText0 方 法 的 用 法 如 下 : 
context .fillText (text, x, y, [maxWidth]); 


其 中 ，text 为 要 绘制 的 文字 ，x、y 为 绘制 文字 的 坐标 ，maxWidth 为 可 选 参数 ， 表 示 显 示 文 


字 时 的 最 大 宽度 。 


如 果 要 绘制 的 文字 大 于 最 大 宽度 ， 那 么 字体 会 被 调整 成 更 小 的 字号 或 者 


更 瘦 的 字体 。 例 如 ，filledText.html。 
filledText.html: 


filledText<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title> 绘 制 填充 文字 </title> 


</head> 
<body> 


<canvas id="myCanvas" width="250" height="150" style="border:1px solid"> 
</canvas> 


</body> 


<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
.font="italic 35px 黑体 "; 


context 


context. 


context 


context. 
context. 


context. 


</script> 
</html> 


.fillText ("红色 填充 文字 ", 10, 40, 200); 


fillstyle="red"; 


font="bold 40px 宋体 "; 
fillstyle="green"; 
fil11lText ("绿色 填充 文字 ", 10, 100, 200); 


filledText.html 在 浏览 器 中 的 显示 效果 如 图 3-7 所 示 。 
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图 3-7 ”filledText.html 的 显示 效果 


3.3.2 ”绘制 轮廓 文字 


绘制 轮廓 文字 时 ，strokeText() 方 法 的 用 法 如 下 : 
Context . strokeText (text, x, y, [maxWidth]) 


其 中 ，text 为 要 绘制 的 文字 ，x、y 为 绘制 文字 的 坐标 ，maxWidth 为 可 选 参数 ， 表 示 显 示 文 
字 时 的 最 大 宽度 。 例 如 ，hollowTexthtml。 
hollowText.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 绘 制 轮廓 文字 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="250" height="150" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 
context .font="italic 35px 黑体 "; 
context .strokestyle="red"; 
context .strokeText ("红色 轮廓 文字 ", 10, 40, 200); 
context .font="bold 40px 宋体 "; 
context .strokeStyle="green™"; 
context .strokeText ("绿色 轮廓 文字 ", 10, 100,200); 
</script> 
</html> 
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hollowText.html 在 浏览 器 中 的 显示 效果 如 图 3-8 所 示 。 
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图 3-8 ”hollowText.html 的 显示 效果 


6.4 图 形变 换 


利用 图 形 的 变换 可 以 绘制 出 大 量 复杂 多 变 的 图 形 。 图 形 的 变换 主要 包括 移动 、 缩 放 、 


3.4.1 保存 与 恢复 


在 绘画 的 时 候 ， 本 来 使 用 绿色 笔画 ， 突 然 需要 改 用 红色 笔画 ， 但 画 完 之 后 又 要 使 用 绿 
色 笔 画 。 如 果 是 现实 中 的 作画 ， 可 以 使 用 不 同 的 笔 苹 上 不 同 的 墨水 ， 根 据 颜 色 选择 画笔 。 
但 是 在 canvas 中 画笔 只 有 一 支 。 如 果 要 更 换 画 笔 的 颜色 ， 就 需要 保存 和 恢复 状态 ， 状 态 其 
实 就 是 画布 当前 属性 的 一 个 快照 , 包括 图 形 的 属性 、 当 前 裁 切 路 径 、 当 前 应 用 的 变换 。canvas 
中 使 用 save() 方 法 来 保存 状态 , 使 用 restore() 方 法 来 恢复 状态 。canvas 状态 是 用 栈 来 保存 的 ， 
每 次 调用 save() 方 法 , 就 把 当前 状态 入 栈 保 存 , 当前 状态 成 为 栈 顶 ; 每 次 调用 restore() 方 法 ， 
就 把 栈 顶 的 状态 取出 来 ， 并 将 画布 恢复 到 这 个 状态 。 例 如 ，saveAndRestore.html， 利 用 状 
态 的 保存 与 恢复 绘制 颜色 不 同 的 填充 矩形 。 

saveAndRestore.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 状 态 的 保存 和 恢复 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="250" height="250" style="border:1px solid"> 
</canvas> 
</body> 
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<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context .fillstyle = "yellow"; 
context .fillRect (10, 10, 230, 230); 
context .fil1l (); 


context .save (); 
context.fillstyle = "aquamarine"; 
context .fillRect (30, 30, 190, 190); 


context.save(); 
context.fillstyle = "cornflowerblue"; 
context.fillRect (50, 50, 150, 150); 


Context .restore (); 
context .beginPath () 7 
context .fillRect (70, 70, 110, 110); 
context.restore (); 
context.fillRect (90, 90, 80, 80); 
context .fill (); 
</script> 
</html> 


saveAndRestore.html 在 浏览 器 中 的 显示 效果 如 图 3-9 所 示 。 
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图 3-9 saveAndRestore.html 的 显示 效果 


3.4.2 移动 


绘制 图 形 时 ， 可 以 使 用 Context 对 象 的 translate() 方 法 移动 坐标 空间 ， 使 画布 的 坐标 
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空间 发 生 水 平和 垂直 方向 的 偏 移 ，translate(dx, dy) 中 的 dx 为 水 平方 向 的 偏 移 量 ,dy 为 垂直 
方向 的 偏 移 量 。 例 如 ，translate html， 利 用 移动 绘制 一 排 圆 。 
translate .html: 


<!DOCTYPE htm1> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 移 动 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="400" height="80" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 
context .fillstyle = "orange"; 
for(var i = 1; i < 10; i++) { 
context .save(); 
context .beginPath (); 
context.arc(40, 40, 20, 0, Math.PI * 2); 
context .closePath(); 
ONDEort. EI 
context .translate(40, 0); 
} 
</script> 
</html> 


translate.html 在 浏览 器 中 的 显示 效果 如 图 3-10 所 示 。 
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3-10 translate.html 的 显示 效果 


3.4.3 缩放 


Context 对 象 的 scale0 方 法 用 于 增 减 canvas 上 下 文 对 象 中 的 像素 数目 ， 从 而 实现 图 形 
或 图 像 的 放大 或 缩小 ，context.scale(sx,，sy) 中 的 sx 为 x 轴 的 缩放 因子 ，sy 为 y 轴 的 缩放 因 
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子 ， 它 们 的 值 必 须 是 正 数 ， 如 果 值 大 于 1 则 为 放大 图 形 ， 如 果 值 小 于 1 则 为 缩小 图 形 。 例 
如 ，scale.html， 绘 制 逐渐 缩小 的 圆 。 
scale.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 缩 放 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="400" height="80" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context .fillstyle = "orange"; 
Eor{(var 1 = 17 i < 15; i++) { 
context .save(); 
context .beginPath (); 
context.arc(40, 40, 20, 0, Math.PI * 2); 
context .closePath (); 
context .fill (); 
context .translate(40, 0); 
context.scale(0.9,0.9); 
} 
</script> 


</html> 


scale.html 在 浏览 器 中 的 显示 效果 如 图 3-11 所 示 。 
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3-11 ”scale.html 的 显示 效果 


3.4.4 旋转 


Context 对 象 的 rotate0 方 法 用 于 以 原点 为 中 心 旋转 上 下 文 对 象 的 坐标 空间 ， 
context.rotate(angle) 方 法 中 的 angle 参数 指 以 弧度 计 的 顺 时 针 方 向 的 旋转 角度 。 例 如 ， 
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Iotate html， 利 用 旋转 绘制 环 状 排列 的 圆 。 
Iotate.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 旋 转 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="300" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
context.translate(150,150); 
context .fillstyle = "orange"; 
for(var = 0 4 < 8 Lit) { 
context .save(); 
context .rotate (Math.PI*(2/4+i/4)); 
Context .translate(0,-100) 7 
context .beginPath () 7 
Context .arc(100，40,20，0，Math.PI * 2) 7 
context .closePath () 7 
context .fill(); 
context .restore(); 
} 
</script> 
</html> 


rotate.html 在 浏览 嚣 中 的 显示 效果 如 图 3-12 所 示 。 
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3-12 “rotate.html 的 显示 效果 
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3.4.5 变形 


Context 对 象 的 transform0 方 法 用 于 直接 修改 变换 矩阵 。 矩阵 变换 常用 于 举 标 变换 不 能 
达到 预期 效果 的 情况 ， 能 够 实现 比 普通 的 坐标 变换 更 加 复杂 的 效果 。transform() 方 法 的 用 
法 如 下 : 

context.transforml(a, b, c, d, e, £); 

各 参数 的 含义 为 : 

。 a 一 一 水 平 缩放 绘图 ; 

。 了 一 一 水 平 倾斜 绘图 ; 

。 c 一 一 垂直 倾斜 绘图 ; 

。 d 一 一 垂直 缩放 绘图 ; 

。 e 一 一 水 平移 动 绘图 ; 

。f 垂直 移动 绘图 。 

可 见 ， 可 以 在 transform() 方 法 中 同时 实现 平移 、 缩 放 、 旋 转 ， 也 可 以 使 用 transform() 
方法 实现 以 上 3 种 变换 中 的 一 种 。 

画布 上 的 每 一 个 对 象 都 拥有 一 个 当前 的 变换 矩阵 ，Context 对 象 的 setTransform() 方 法 
用 于 将 当前 的 变换 矩阵 重 置 为 最 初 的 矩阵 , 即 单位 矩阵 , 然后 以 相同 的 参数 运行 transform() 
方法 ， 也 就 是 说 ，setIransform() 方 法 允许 缩放 、 旋 转 、 移 动 并 倾斜 当前 的 环境 。 该 变换 只 
会 影响 setTransform() 方 法 之 后 的 绘图 。 例 如 ，transform .html， 利 用 变形 和 旋转 在 画布 上 显 
示 呈 螺旋 状 排列 的 半 透 明 的 半圆 。 


transform.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 和 矩阵 变换 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="330" height="300" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 
context.translate (200, 20); 
for(var i = 1; 主 < 100; i++) { 
context .save(); 
contezt transform(0 .95 0% 07 0595% 3307 30 
context .rotate (Math-PI / 12); 
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context .beginPath (); 
context .fillstyle = "orange"7 
context .globalAlpha = "0.7"; 
contert. .arctOr (0% 557 O07 Math- PIT truels 
context -closePath (); 
context .£fil11(); 
} 
</script> 
</html> 


transform.html 在 浏览 器 中 的 显示 效果 如 图 3-13 所 示 。 
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图 3-13 ”transform.html 的 显示 效果 


.5 操作 图 人 


利用 canvas 元 素 不 仅 可 以 绘制 各 种 各 样 的 图 形 ， 而 且 可 以 引入 外 部 图 像 ， 并 对 图 像 进 
行 各 种 操作 ， 例 如 改变 图 像 大 小 、 图 像 切片 、 图 像 合成 等 。canvas 支持 多 种 常见 的 图 像 格 
式 。 向 canvas 元 素 引 入 图 像 ， 分 为 以 下 3 步 。 

1. 创建 image 对 象 


var image = new Image(); 
2. 设 定 image 对 象 的 onload 属性 


image.onload = function(){ 
} 


3. 在 function() 中 绘制 图 像 
可 以 使 用 以 下 方法 : 
。 context.drawImage(image, x, y) 一 一 在 画布 的 指定 位 置 绘制 图 像 ; 
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e context.drawJmage(image, Xx, y, Width, heighb 一 一 按 参数 指定 的 位 置 和 大 小 绘制 图 像 ; 

e context.drawImage(image, x, y, sWidth, sHeight, dx, dy, dWidth, dHeighb 一 一 裁剪 网 
像 ， 并 在 画布 上 绘制 图 像 。 

例如 ，image.html， 在 画布 上 绘制 图 像 ， 并 绘制 轮廓 文字 。 

image.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 引 入 图 像 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="200"></canvas> 
</body> 
<script type="text/javascript"> 
function show() { 
Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 
Var img = new Image(); 
img.onload = function() { 
context .drawImage (img, 0,0,300,200); 
context .font="bold 70px Arial Black"; 
context .strokeSstyle="orangered"; 
context.strokeText ("flowers",120,180,150); 
} 
img.src = "img/flower.jpg"; 
} 
window.onload=function(){ 
show(); 
} 
</script> 
</html> 


image.html 在 浏览 器 中 的 显示 效果 如 图 3-14 所 示 。 
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图 3-14 image.html 的 显示 效果 


YY 


Y 


Web 编程 基础 一 一 HTML5、CSS3、JavaScript (第 2 版 ) 


é.6 其 他 颜色 和 样式 


前 面 使 用 canvas 元素 绘制 图 形 时 ,使 用 的 是 Context 对 象 的 flStyle0 方 法 和 strokeStyle() 
方法 ， 除 此 之 外 ，canvas 元 素 还 支持 更 多 的 颜色 和 样式 ， 包 括 线 型 、 渐 变 、 图 案 、 透 明度 
和 阴影 。 合 理 利用 这 些 颜 色 和 样式 ， 可 以 绘制 出 更 加 复杂 多 变 、 丰 富 多 彩 的 图 形 。 


3.6.1 ” 线 型 

Context 对 象 的 lineWidth、lineCap、lineJoin、miterLimit 属性 分 别 用 于 设置 线条 的 粗 
细 、 端 点 样式 、 两 条 线 端 连接 处 的 样式 以 及 绘制 交点 的 方式 。 

1. lineWidth 

lineWidth 属性 的 值 必须 为 正 数 ， 单 位 为 像素 (px)， 默 认 值 为 1.0。 

2. lineCap 


lineCap 属性 可 取 值 butt、round、square， 默 认 值 为 butt，butt 表示 向 线条 的 每 个 末端 
添加 平 直 的 边缘 ; round 表示 向 线条 的 每 个 末端 添加 圆 形 线 帽 ， square 表示 向 线条 的 每 个 末 
端 添 加 正方 形 线 帽 。 例 如 ，widthAndCap.html， 分 别 绘制 圆 形 线 帆 但 粗细 不 同 的 线 型 。 
widthAndCap.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 线 型 示例 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="300" height="200" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
var context = canvas.getContext ("2d"); 
for(var i=1;i<=14;i++){ 
context .strokeSstyle="green"; 
context .linewWwidth=i; 
context .lineCap="round"; 
context .beginPath (); 
context .moveTo (20*i, 50); 
context .lineTo (20*i,200); 
context .stroke(); 
} 
</script> 
</html> 


第 3 章 HTML5 画布 30 


widthAndCap.html 在 浏览 器 中 的 显示 效果 如 图 3-15 所 示 。 
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图 3-15 widthAndCap.html 的 显示 效果 


3. lineJoin 

lineJoin 属性 用 于 设置 两 条 线段 连接 处 的 样式 ， 可 取 值 round、bevel、miter， 默 认 值 为 
miter。round 为 贺 角 ，bevel 表示 边 角 ，miter 为 尖 角 。 

4. miterLimit 

miterLimit 属性 用 来 设置 或 返回 最 大 斜 接 长 度 ， 斜 接 长 度 指 的 是 在 两 条 线 交 汇 处 内 角 
和 外 角 之 间 的 距离 。 只 有 当 lineJoin 属性 为 miter 时 ，miterLimit 属性 才 有 效 。 边 角 的 角度 
越 小 ， 斜 接 长 度 就 会 越 大 ， 为 了 避免 斜 接 长 度 太 大 ， 可 以 使 用 miterLimit 属性 进行 限制 。 
如 果 斜 接 长 度 超过 了 miterLimit 属性 设置 的 值 ， 则 边 角 会 以 bevel， 即 边 角 的 形式 显示 。 


3.6.2 渐变 


canvas 元 素 在 绘制 图 形 时 除了 可 以 指定 固定 颜色 之 外 ， 还 可 以 指定 渐变 色 。 渐 变 分 为 
线性 渐变 和 径 向 渐变 。 

1. 绘制 线性 渐变 

要 绘制 线性 渐变 ， 首 先 需 要 使 用 Context 对 象 的 createLinearGradient() 方 法 创建 
canvasGradient 对 象 ， 然 后 使 用 addColorStop0 方 法 上 色 。createLinearGradient() 方 法 定义 
如 下 : 


context .createLinearGradient (xl, yl, x2, y2); 


其 中 ，xl 和 yl 为 渐变 的 起 点 ，x2 和 y2 为 渐变 的 终点 。 
addColorStop() 方 法 定义 如 下 : 


context .addColorStop (position, color); 

其 中 ，position 为 渐变 中 色 标 的 相对 位 置 ， 为 0 一 1 之 间 的 浮 点 值 ， 渐 变 起 点 的 相对 位 置 为 
0， 终点 的 相对 位 置 为 1。 例 如 ，linearGradient html， 在 矩形 中 添加 3 种 颜色 ,起 点 为 红色 ， 
中 间 点 为 黄色 ， 终 点 为 白色 。 


Kse 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 线 性 渐变 </title> 
</head> 
<body> 


</canvas> 
</body> 


Var canvas = document. 
Var context = canvas.g 
var gradient = context 
gradient .addColorstop( 
gradient .addColorstop( 
gradient .addColorstop( 
context .fillstyle = gr. 
context.fillRect (0, 0, 
</script> 
</html> 


<canvas id="myCanvas" width="300" height="200" style="border:1px solid"> 


<script type="text/javascript"> 


getElementById ("myCanvas"); 
etContext ("2d"); 
.CreateLinearGradient (0, 0, 0, 200); 
rede) 

0.5, "yellow"); 

1, "white"); 

adient; 

300, 200); 


linearGradient.html 在 浏览 器 中 的 显示 效果 如 图 3-16 所 示 。 
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图 3-16 


2. 绘制 径 向 渐变 


linearGradient.html 的 显示 效果 


径 向 渐变 也 称 为 扩散 性 渐变 ， 首先 需要 使 用 Context 对 象 的 createRadialGradient() 方 法 
创建 canvasGradient 对 象 ， 然 后 使 用 addColors0 方 法 上 色 。createRadialGradient() 的 使 用 方 


法 如 下 : 


context .createRadialGradie 


nt (ly YL le 2 Y2, r2)? 
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其 中 , xl 和 yl 定义 一 个 以 (x1, y1) 为 圆心 ,以 zl 为 半径 的 开始 圆 , x2 和 y2 定义 一 个 以 (x2, 
站 ) 为 圆心 ， 以 冯 为 半径 的 结束 圆 。 这 两 个 圆 描述 了 渐变 的 方向 及 起 止 位 置 ， 也 描述 了 渐 
变 的 形状 。 例 如 ，radialGradient.html。 

radialGradient.html: 


<html> 


<!DOCTYPE html> 


<head> 


<meta charset="UTF-8"> 
<title> 径 向 渐变 </title> 


</head> 
<body> 


<canvas id="myCanvas" width="300" height="200"></canvas> 


</body> 
<script type="text/javascript"> 


Var canvas = document .getElementById("myCanvas"); 

var context = canvas.getContext ("2d"); 

var gradient = context.createRadialGradient (50,50,20,100,100,50); 
gradient .addColorstop(0, "red"); 

gradient .addColorstop(0.8, "yellow"); 

gradient.addColorstop(1, "blue"); 

context .fillstyle = gradient; 

context.fillRect (10, 10, 200, 200); 


</script> 
</html> 


radialGradient.html 在 浏览 器 中 的 显示 结果 如 图 3-17 所 示 。 
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图 3-17 radialGradient.html 的 显示 效果 
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3.6.3 ”绘制 图 案 


Context 对 象 的 createPattem() 方 法 可 以 用 来 填充 图 像 ， 其 用 法 如 下 : 


context -createPattern (image, type); 


其 中 ，image 为 要 引用 的 Image 对 象 或 者 男 一 个 Canvas 对 象 ，type 是 填充 图 像 的 方式 ， 可 
区 值 为 : 

。 repeat 一 一 同时 沿 x 轴 方 向 和 y 轴 方 向 平 铺 ; 

。 repeat-x 一 一 只 沿 x 轴 方 向 平 铺 ; 

。 Tepeat-y 一 一 只 沿 y 轴 方 向 平 铺 ; 

。 no-repeat 不 平 铺 。 

例如 ，pattem.html， 在 canvas 元 素 内 沿 x 轴 方 向 和 y 轴 方 向 平 铺 图 像 。 

pattern.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 平 铺 图 像 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="200" height="200" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
function show() { 
Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 
var img = new Image(); 
img.onload = function() { 
Var pattern = context.createPattern (img, 'repeat'); 
context .fillstyle = pattern; 
context .fillRect (0, 0, 200, 200); 
} 
img.src = "img/timg.jpg"; 
alert (img.src); 
} 
window.onload = function() { 
show(); 
1 
</script> 
</html> 
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pattern.html 在 浏览 器 中 的 显示 效果 如 图 3-18 所 示 。 
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图 3-18 ”pattern.html 的 显示 效果 


3.6.4 ”透明度 


除了 可 以 使 用 Context 对 象 的 globalAlpha 属性 设置 图 形 的 透明 度 之 外 ， 还 可 以 利用 
Igba() 方 法 设置 色彩 的 透明 度 。rgba0 的 使 用 方法 如 下 : 

rgba (R，G，B，R) 
其 中 , R、G、B 分 别 是 颜色 的 红 、 绿 、 蓝 分 量 ，A 为 不 透明 值 ， 为 0.0 一 1.0 之 间 的 浮 点 数 ， 
0 为 完全 透明 ，1 为 完全 不 透明 。 例 如 “rgba(0, 255，0, 0.5)” 表 示 半 透明 的 绿色 。 例 如 ， 
alpha.html， 在 画布 上 画 一 排 透明 度 不 同 的 圆 。 

alpha.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 透 明度 </title> 
</head> 
<body> 
<canvas id="myCanvas" width="560" height="80" style="border:1px solid"> 
</canvas> 
</body> 
<script type="text/javascript"> 
Var canvas = document .getElementById ("myCanvas"); 
Var context = canvas.getContext ("2d"); 
For(var Tt = Et < 10 rty 
context .fillstyle = "rgba(0,255,0,"+((i-1)/9)+")"; 


context .save(); 


NY 
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context 


context 
} 
</script> 
</html> 


context. 


context. 
context. 
-translate(60, 0); 


beginPath (); 


-arc(40, 40, 30, 0, Math.PI * 2); 


closePath (); 
于 


alpha.html 在 浏览 器 中 的 显示 效果 如 图 3-19 所 示 。 


D 透明 度 x 到 
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3.6.5 ”阴影 


可 以 使 用 Context 对 象 的 属性 对 绘制 的 图 形 或 文字 添加 阴影 效果 ， 设 置 阴影 的 属性 主 


要 有 : 


图 3-19 alpha.html 的 显示 效果 


Ht 


。 shadowOffsetX 一 一 设置 或 返回 形状 与 阴影 的 水 平 距 离 ， 默 认 值 为 0; 


。 shadowOffsetY 一 一 设置 或 返 


形状 与 阴影 的 垂直 距离 ， 默 认 值 为 0; 


。 shadowBlur 一 一 设置 或 返回 阴影 的 模糊 级 数 ， 取 值 为 整数 值 ; 
。 shadowColor 一 一 设置 或 返回 阴影 的 颜色 。 
例如 ，shadow.html， 为 画布 中 的 文字 添加 阴影 。 


shadow.html: 


<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title> 阴 影 </title> 


</head> 
<body> 


<canvas id="myCanvas" width="250" height="150" style="border:1px solid"> 


</canvas> 
</body> 


<script type="text/javascript"> 


Var canvas = document .getElementById ("myCanvas"); 


第 3 章 HTML5 画布 NA 


Var Context = CanVas -getContext ("2d"); 
Context .shadowOffsetX=47 
Context .shadowOffsetY=4; 
context .shadowBlur=2; 
context .shadowColor="rgba(0,0,0,0.5)"; 
context .font="italic 35px 黑体 "; 
context .fillstyle="red"; 
context .fillText ("红色 填充 文字 ", 10, 40, 200); 
context .font="bold 40px 宋体 "; 
context.strokestyle="green™"; 
context .strokeText ("绿色 轮廓 文字 ", 10, 100, 200); 
</script> 
</html> 


shadow.html 在 浏览 器 中 的 显示 效果 如 图 3-20 所 示 。 
gee) 


nm > 是 
| C OIO12700180. 人 | : | 


红色 纺 充 文字 
绿色 输 计 文学 


图 3-20 shadow html 的 显示 效果 
小 结 


。 利用 HTMLS 中 的 canvas 元 素 可 以 实现 图 形 的 绘制 ,能够 对 图 像 进行 像素 级 别 的 操作 ; 

。 利用 canvas 元 素 可 以 绘制 直线 、 和 矩形 、 圆 或 圆 弧 、 多 边 形 等 图 形 ; 

。 利用 canvas 元 素 可 以 绘制 填充 文字 或 轮廓 文字 ; 

。 利用 canvas 元 素 可 以 实现 状态 的 保存 与 恢复 、 图 形 的 平移 、 图 形 的 缩放 、 图 形 的 旋 
转 、 图 形 的 变形 等 ; 

。 利用 canvas 元 素 可 以 操作 外 部 图 像 ， 将 其 引入 到 网 页 中 ; 

。 canvas 元 素 还 支持 更 多 的 颜色 和 样式 ， 包 括 线 型 、 渐 变 、 图 案 、 透 明度 和 阴影 。 


习题 


1. Context 对 象 的 ) 方法 将 画笔 移动 到 指定 的 坐标 点 。 
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A. moveTo() 
B. lineTo() 
C. fl0 
D. stroke() 
2. canvas 元 素 使 用 ( ) 方法 获取 上 下 文 对 象 。 
A. stroke() 
B. getContext() 
C. fl0 
D. controller() 
3. 以 下 关于 线条 属性 的 说 法 中 ，( ) 是 正确 的 。 
A. lineCap 属性 设置 或 返回 线条 末端 线 帽 的 样式 
B，butt 值 为 向 线条 末端 添加 平 直 的 边缘 
C. round 值 为 向 线条 末端 添加 圆 形 线 帆 
D. 以 上 都 正确 
4. Context 对 象 的 ) 方法 可 以 绘制 矩阵 轮廓 。 
A. fl]RectO 
B. strokeRect() 
C. fillstyle0 
D. strokeStyle() 
5，Context 对 象 的 〈 ) 方法 用 于 绘制 填充 文字 。 
A. filText() 
B. strokeText() 
C. filstyle0 
D. strokeStyle() 
6. Context 对 象 的 ) 方法 可 以 实现 坐标 空间 的 移动 。 
A. scale() 
B. translate() 
C. transform() 


D. rotate() 
7.Context 对 象 的 ) 方法 可 以 实现 旋转 坐标 空间 。 
A. scale() 


B. translate() 
C. transform() 
D. rotate() 
8. 使 用 canvas 绘制 一 个 填充 矩形 ， 要 求 矩形 的 填充 色 为 红色 ， 再 绘制 一 个 矩形 轮廓 ， 
要 求 矩形 为 圆 角 和 矩形 ， 边 框 的 颜色 为 蓝 色 ， 边 框 的 宽度 为 10px。 


a 
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Web 上 的 多 媒体 包括 文字 、 图 片 、 音 乐 、 录 音 、 电 影 、 动画 等 。 多 媒体 有 多 种 不 同 的 
格式 ， 它 可 以 是 听 到 或 看 到 的 任何 内 容 。 在 互联 网 上 ， 几 乎 所 有 网 站 都 使 用 嵌入 网 页 中 的 
多 媒体 元 素 。 第 一 代 浏览 器 只 支持 文本 ， 而 且 仅 限 于 单一 的 字体 和 颜色 。 随 后 诞生 了 支持 
颜色 、 字 体 和 文本 样式 的 浏览 器 ， 还 增加 了 对 图 片 的 支持 。 不 同 的 浏览 器 以 不 同 的 方式 处 
理 对 音效 、 动 画 和 视频 的 支持 ， 某 些 元 素 能 够 以 内 联 的 方式 处 理 ， 而 某 些 元 素 则 需要 额外 
的 插件 。 现 代 浏览 器 大 多 数 已 支持 多 种 多 媒体 格式 。 到 目前 为 止 ， 还 不 存在 网 页 上 播放 音 
频 和 视频 的 统一 标准 。 

在 进行 Web 开发 时 经 常 需要 在 客户 端 保存 一 些 信息 ,例如 用 户 的 登录 信息 、 自 定义 的 
主题 、 计 数 器 信息 等 。 客户 端 存储 数据 的 方法 有 很 多 , 最 简单 的 方法 是 使 用 Cookie, Cookie 
的 兼容 性 较 好 ， 但 是 使 用 Cookie 存在 一 些 次 端 ,。HTMLS5 中 支持 使 用 Web Storage 和 Web 
SQL 来 解决 Web 应 用 中 的 数据 存储 问题 。 


人 音频 


4.1.1 音频 格式 


常见 的 音频 格式 有 Wave、AIFF、MIDI、AU、MP3、OGG 等 。 

1. Wave 

Wave 音频 的 扩展 名 为 .wav， 是 录音 时 使 用 的 标准 的 WINDOWS 文件 格式 ， 是 一 种 由 
Microsoft 和 IBM 联合 开发 的 用 于 音频 数字 存储 的 标准 ， 它 采用 RIFF 文件 格式 结构 ， 非 常 
接近 于 AIFF 和 IFF 格式 。 

2. AIFF 

AIFF (Audio Interchange File Format) 音频 的 扩展 名 是 .aiff 或 .aif， 是 一 种 文件 格式 存 
储 的 数字 音频 (波形 ) 的 数据 。AIFF 支持 各 种 比特 决议 、 采 样 率 和 音频 通道 。 它 是 Apple 
公司 开发 的 一 种 声音 文件 格式 ， 被 Macintosh 平台 及 其 应 用 程序 所 支持 。 

3. MIDI 

MIDI (Musical Instrument Digital Interface) 音频 的 扩展 名 为 .mid， 是 20 世纪 80 年 代 
初 为 解决 电 声乐 器 之 间 的 通信 和 问题 而 提出 的 。MIDI 是 编 曲 界 最 广泛 的 音乐 标准 格式 ， 可 
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称 为 “计算 机 能 理解 的 乐谱 ”。 它 用 音符 的 数字 控制 信号 来 记录 音乐 。 

4. AU 

AU 音频 扩展 名 为 .au， 是 为 UNIX 系统 开发 的 一 种 音乐 格式 ， 和 WAV 非常 相像 ， 在 
大 多 数 的 音频 编辑 软件 中 也 都 支持 此 音乐 格式 。 在 Java 自 带 的 类 库 中 能 得 到 播放 支持 。 

5. MP3 

MP3 (MPEG-1 Audio Layer3) 音频 扩展 名 为 .mp3， 是 最 流行 的 音乐 文件 格式 。 它 大 
幅度 地 降低 了 音频 数据 量 ， 而 对 于 大 多 数 用 户 来 说 重 放 的 音质 与 最 初 的 不 压缩 音频 相 比 没 
有 了 明显 下 降 。 

6. OGG 

OGG (OGGVobis) 音频 扩展 名 为 .ogg， 类 似 于 MP3 等 的 音乐 格式 。 它 完全 免费 、 开 
放 和 没有 专利 限制 。OGG 文件 格式 可 以 不 断 地 进行 大 小 和 音质 的 改良 , 而 不 影响 原 有 的 编 
码 器 或 播放 器 。 

7. MPEG-4 Audio 

MPEG-4 Audio 音频 扩展 名 为 .m4a， 纯 音频 的 MPEG-4 格式 使 用 了 先进 的 音频 编码 技 
术 ACC (Advanced Audio Coding) 的 编码 器 ， 得 到 了 QuickTime、iTunes 等 软件 和 iPod、 
iPad 等 移动 设备 的 支持 。 


4.1.2 audio 元 素 


到 目前 为 止 ， 仍 然 不 存在 网 页 上 播放 音频 的 标准 ， 在 HIML5 之 前 ， 大 多 数 音频 是 通 
过 插件 播放 的 ， 例 如 Flash， 但 是 并 非 所 有 浏览 器 都 安装 有 符合 要 求 的 插件 。HIML5 中 通 
过 audio 元 素来 播放 声音 文件 或 者 音频 流 。 目 前 ，audio 元 素 支 持 OGG、MP3、WAV 3 种 
音频 格式 , audio 元 素 具体 支持 的 音频 还 和 浏览 器 有 关 , 例如 Chrome 3.0 支持 OGG 和 MP3 
格式 的 音频 。audio 元 素 插入 单个 资源 音频 的 使 用 方法 如 下 : 

<audio src="src" controls="controls"> 

你 的 浏览 器 不 支持 audio 元 素 

</audio> 

<audio> 与 </audio> 之 间 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 。 

audio 元 素 允 许 插入 多 个 资源 音频 ， 浏 览 器 将 使 用 第 一 个 可 以 识别 的 格式 ， 使 用 方法 
如 下 : 


<audio controls="controls"> 
<source src="srcl" type="audio/ogg"/> 
<source src="src2" type="audio/mp4"/> 
<source src="src3" type="audio/webm"/> 
</audio> 


audio 元 素 的 常用 属性 包括 : 


。 autoplay 一 一 如 果 出 现 该 属性 ， 则 音频 就 绪 后 开始 自动 播放 。 
如 果 出 现 该 属性 , 则 向 用 户 显示 播放 的 控制 条 , 例如 播放 、 和 暂停 、 定 位 、 


® controls 
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时 间 显示 、 音 量 控 制 、 全 屏 切换 等 常用 控件 。 如 果 开 发 人 员 不 希望 使 用 默认 的 控制 
条 ， 也 可 以 使 用 JavaScript 自 定义 控制 条 。 

如 果 出 现 该 属性 ， 音 频 自动 循环 播放 。 

muted: 如 果 出 现 该 属性 ， 音 频 静 音 。 

preload 一 一 如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 加 载 ， 并 预备 播放 。 如 果 出 现 
autoplay 属性 ， 则 此 属性 无 效 。 

src 一 一 音频 资源 的 URL。 

readyState 一 一 用 于 返回 音频 当前 播放 位 置 的 就 绪 状 态 。 

volume 一 一 音频 资源 的 播放 音量 ， 范 围 为 0.0 一 1.0，0.0 为 静音 ，1.0 为 最 大 音量 。 
curentTime 一 一 音频 的 当前 播放 位 置 ， 返 回 值 为 时 间 ， 单 位 为 秒 〈s)。 
duration 一 一 音频 的 可 持续 时 间 ， 单 位 为 秒 (s)。 

audio 元 素 的 使 用 示例 可 参考 audio.html。 

audio.html: 


loop 


<!DOCTYPE html > 
<html> 
<meta charset="UTF-8"> 
<head> 
<title>audio 的 使 用 </title> 
</head> 
<body> 
<hl>Love In Blue</hl> 
<audio src="media/Love In Blue.mp3" controls="controls"> 
你 的 浏览 器 不 支持 audio 元素 
</audio> 
</body> 
</html> 


audio.html 在 Chrome 浏览 器 中 的 显示 效果 如 图 4-1 所 示 , 单 击 播 放 按钮 后 会 播放 音频 。 
lex)| 


/ 口 audio 的 使 用 x 
| C HO [O2700Ls020/cho4. 女 | : | 


Love In Blue 


bP 000/147 @— -) —® # 


图 4-1 audio.html 的 显示 结果 


4.1.3 JavaScript 控制 Audio 对 象 


除了 可 以 直接 在 页 面 中 添加 audio 元 素 之 外 ， 还 可 以 使 用 JavaScript 脚本 控制 andio 元 
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素 ， 使 页 面 更 加 自由 灵活 地 播放 音频 文件 。 
audio 元 素 是 Audio 对 象 的 实例 ， 是 HIMLS 中 的 新 对 象 ， 可 以 通过 document 对 象 的 
getElementById() 来 访问 audio 元 素 ， 也 可 以 通过 document 对 象 的 createElement("audio") 来 


创建 audio 元 素 。 
Audio 对 象 的 主要 事件 包括 : 
e addTextTrack() 向 音频 添加 新 的 文本 轨道 。 
。 canPlayType() 一 一 检查 浏览 器 是 否 能 够 播放 指定 的 音频 类 型 。 


fastSeek() 一 一 在 音频 播放 器 中 指定 播放 时 间 。 
getStartDate() 一 一 返回 新 的 Date 对 象 ， 表 示 当 前 时 间 线 偏 移 量 。 
load() 一 一 重新 加 载 音频 元 素 。 
play() 一 一 开始 播放 音频 。 
pause() 一 一 暂停 当前 播放 的 音频 。 
在 JavaScript 脚 本 中 ,可 以 使 用 audio 元 素 的 addEventListener() 方 法 向 其 添加 事件 句柄 ， 
从 而 实现 当 事 件 发 生 时 调用 某 个 函数 。DOM 对 象 的 事件 本 书后 文 会 有 详细 介绍 。 通 过 肢 
本 控制 audio 元素 的 示例 可 参考 audioAnd]JS.html。 
audioAndJS.html: 


<!DOCTYPE html > 
<html> 
<meta charset="UTF-8"> 
<head> 
<title> 使 用 Javascript 控制 audio</title> 
<script type="text/javascript"> 

var audio = document .createElement ("audio"); 

audio.src = "media/Love In Blue.mp3"; 

audio.addEventListener ("canplaythrough", 
function() { 

alert (' 音 频 文件 已 经 准备 好 ， 随 时 待命 ') ; 

}, 
false); 

function aPlay() { 
audio.play(); 

} 

function go() { 
audio.currentTime += 10; 
audio.play(); 

} 

function back() { 
audio.currentTime -= 10; 
audio.play();; 

} 

function pause(){ 
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audio.pause (); 
} 
function stop(){ 
audio.currentTime=0; 
audio.pause (); 
1 
</script> 
</head> 
<body> 
<hl>Love In Blue</h1l> 
<input type="button" onclick="aPlay();"” value=" 播 放 "> 
<input type="button" onclick="go();"” value=" 快 进 "> 
<input type="button" onclick="back();"” value=" 快 退 "> 
<input type="button" onclick="pause();"” value=" 暂 停 "> 
<input type="button" onclick="stop();" value=" 停 止 "> 
</body> 
</html> 


audioAndJS.html 在 浏览 器 中 的 显示 结果 如 图 4-2 所 示 ， 当 单 击 相应 按钮 时 会 实现 相应 
功能 。 


Ds 


| CGC OO |©127.00.1:8020/.. 人 妇 


Love In Blue 


| 播放 || 快 进 || 快 退 || 暂停 || 停止 | 


图 4-2 audioAndJS.html 的 显示 结果 


人 2 视频 


4.2.1 视频 格式 


视频 格式 是 视频 播放 软件 为 了 能 够 播放 视频 文件 而 赋予 视频 文件 的 一 种 识别 符号 。 常 
见 的 视频 格式 主要 包括 AVI、WMV、MPEG、QuickTime 等 。 

1. AVI 

AVI(Audio Video Interleave ) 视频 的 扩展 名 为 .avi, 由 微软 公司 开发 ,所 有 运行 Windows 
操作 系统 的 计算 机 都 支持 AVI 格式 ， 但 非 Windows 操作 系统 的 计算 机 对 AVI 格式 的 支持 
并 不 理想 。 
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2. WMV 

WMYV (Windows Media Video) 视频 扩展 名 为 .wmv， 即 Windows Media 格式 ， 是 由 微 
软 公司 开发 的 ， 在 互联 网 上 很 常见 ， 但 是 需要 安装 免费 的 额外 组 件 才能 正常 播放 。 

3. MPEG 

MPEG (Moving Pictures Expert Group) 视频 扩展 名 为 .mpg 或 者 .mpeg， 是 互联 网 上 最 
流行 的 视频 格式 ， 跨 平台 ， 得 到 了 所 有 流行 的 浏览 器 的 支持 。 

4. QuickTime 

QuickTime 视频 扩展 名 为 .mov， 是 由 苹果 公司 开发 的 ， 是 互联 网 上 常见 的 视频 格式 ， 
但 是 QuickTime 视频 不 能 在 没有 安装 组 件 的 Windows 操作 系统 的 计算 机 上 播放 。 

5. RealVideo 

RealVideo 视频 的 扩展 名 为 .rm 或 ram， 是 由 Real Media 针对 互联 网 开发 的 ， 该 格式 的 
视频 是 低 带 宽 优 先 的 ， 因 此 常会 降低 视频 质量 。 

6. Flash 

Flash (Shockwave) 视频 的 扩展 名 为 .swf 或 者 .flv, 是 由 Macromedia 开发 的 , Shockwave 
格式 需要 额外 的 插件 才能 播放 。 

7. Mpeg-4 

Mpeg-4 (with H.264 video compression) 视频 的 扩展 名 为 .mp4， 是 一 种 针对 互联 网 的 新 
格式 。 事 实 上 ，YouTube 推荐 使 用 MP4。YouTube 接收 多 种 格式 ， 然 后 全 部 转换 为 flv 
或 .mp4 以 供 分 发 。 越 来 越 多 的 视频 发 布 者 转 到 MP4, 将 其 作为 Flash 播放 器 和 “HTML5 
的 Internet 共享 格式 。 


4.2.2 _ video 元素 


HIML5 中 提供 了 video 元 素 向 网 页 中 添加 视频 ， 可 以 支持 MP4、WebM、Ogg 3 种 格 
式 的 视频 。video 元 素 插 入 单个 资源 视频 的 使 用 方法 如 下 : 

<video src="src" controls="controls"> 

你 的 浏览 器 不 支持 video 元 素 

</video> 

<video> 与 </video> 之 间 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 的 。 

video 元 素 允 许 插入 多 个 资源 视频 ， 浏 览 器 将 使 用 第 一 个 可 以 识别 的 格式 ， 使 用 方法 
如 下 : 

<video controls="controls"> 


<source src="srcl" type="video/ogg"/> 


<source src="src2" type="video/mp4"/> 


</video> 


video 元 素 的 属性 与 audio 元 素 类 似 ， 主 要 属性 包括 : 
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视频 就 绪 后 马上 播放 。 

向 用 户 显示 播放 控制 按钮 。 

height 一 一 视频 播放 器 高 度 。 

循环 播放 。 

muted: 静音 。 

poster 一 一 规定 视频 正在 下 载 时 显示 图 像 ， 直 到 单 击 播放 按钮 。 
视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 
视频 的 URL。 

width 一 一 视频 播放 器 的 宽度 。 

video 元 素 的 使 用 可 参考 video.html 。 

video.html: 


autoplay- 


controls 


loop 


Preload 


SIC 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>video 的 使 用 </title> 
</head> 
<body> 
<h1> 瀑 布 </h1> 
<Video src="media/waterfall .mp4" type="video/mp4" height="300px" controls> 
你 的 浏览 器 不 支持 video 元 素 
</video> 
</body> 
</html> 


在 浏览 器 中 打开 video.html， 可 以 播放 视频 。 


43 Web Storage 


在 HIMLS 之 前 , 如 果 开 发 者 要 在 客户 端 存储 少量 数据 , 只 能 使 用 Cookie 实现 , Cookie 
通过 HTTP Headers 从 服务 器 端 返 回 到 浏览 器 上 。 首 先 ， 服务 器 端 在 响应 中 利用 Set-Cookie 
header 来 创建 Cookie， 然 后 ， 浏 览 器 在 它 的 请 求 中 通过 Cookie header 包含 已 经 创建 的 
Cookie， 并 且 将 它 返 回 至 服务 器 ， 从 而 完成 客户 端的 验证 。 

Cookie 的 兼容 性 较 好 ， 其 优点 主要 有 : 

。 可 以 灵活 地 配置 Cookie 的 过 期 时 间 ， 可 以 设置 Cookie 浏览 器 会 话 结束 失效 ， 也 可 

以 设置 其 永久 有 效 。 
。 不 需要 任何 服务 器 资源 。 
。 Cookie 是 一 种 基于 文本 的 轻 量 级 结构 ， 包 含 简单 的 键 / 值 对 。 


SN 
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但 是 使 用 Cookie 也 有 一 些 次 端 ， 主 要 表现 为 : 

。 Cookie 会 被 附加 到 HTTP 请 求 中 发 送 到 服务 器 ， 无 形 中 会 增加 流量 。 
。 HTTP 请 求 中 的 Cookie 是 明文 传递 ， 存 在 一 定 的 安全 问题 。 

。 Cookie 的 大 小 被 限制 为 4KB， 不 适用 于 复杂 的 存储 需求 。 

关于 Cookie 的 内 容 本 书后 面 有 更 详细 的 介绍 。 


HTMLS 中 提出 了 新 的 Web 存储 方案 ， 即 Web Storage 和 Web SQL。Web Storage 可 以 
将 信息 以 键 / 值 对 的 形式 保存 到 客户 端 ，Web Storage 提供 了 两 种 在 客户 端 存储 数据 的 方法 ， 
即 localStorage 和 sessionStorage。 二 者 非常 类 似 ， 区 别 仅 在 于 生存 周期 不 同 。localStorage 


是 一 种 没有 时 间 限 制 的 存储 方式 ， 除 非 主动 删除 数据 ， 和 否则 数据 可 以 永远 有 效 ， 


因此 


localStorage 可 用 于 本 地 持久 化 存储 。sessionStorage 的 生存 周期 是 会 话 周期 , 存储 数据 在 同 
一 个 会 话 周期 内 的 页 面 可 以 访问 ， 当 会 话 结束 后 数据 也 随 之 失效 。Web Storage 数据 存储 机 


制 相 比 于 Cookie 有 明显 的 优势 ， 主 要 表现 为 : 
。 存储 空间 的 大 小 一 般 为 $S 一 10MB， 与 具体 的 浏览 器 有 关 。 
。 存储 内 容 仅 仅 存储 在 客户 端 本 地 ， 不 会 被 发 送 到 服务 器 。 
。 提供 了 更 丰富 、 更 易 用 的 接口 ， 操 作 更 加 方便 。 
1. Web Storage 的 方法 
Web Storage 的 方法 包括 : 


原 值 。 


组 ， 通 过 下 标 访问 。 如 果 指 定 的 键 不 存在 ， 则 返回 null。 


操作 。 


据 ， 则 不 执行 任何 操作 。 
2. Web Storage 的 属性 
Web Storage 的 属性 包括 : 
。 length 一 一 获取 当前 storage 对 象 中 存储 键 / 值 对 的 数量 。 
。 key(index) 一 一 获取 指定 位 置 的 键 值 ，index 从 0 开始 ， 到 length-1 结束 。 
3. Web Storage 的 事件 


setItem(key，value) 一 一 将 数据 存储 到 指定 键 对 应 的 位 置 。 如 果 值 已 存在 ， 则 替换 
getItem(key，value) 一 一 根据 给 定 的 键 返回 相应 的 值 。 也 可 以 将 storage 对 象 作为 数 
IemoveItem(key) 一 一 删除 指定 键 对 应 的 值 。 如 果 没 有 指定 的 键 值 ， 则 不 执行 任何 


clear0 一 一 删除 storage 对 象 存储 列表 中 的 所 有 数据 。 如 果 storage 对 象 中 没有 存储 数 


Web Storage 提供 了 事件 通知 机 制 , 可 以 将 数据 更 新 通知 发 送 给 监听 者 。 当 Web Storage 


存储 区 域 的 数据 真正 发 生变 化 时 ， 会 触发 storage 事件 。 如 果 当 前 的 存储 区 域 为 空 ， 


调用 


clear() 方 法 不 会 触发 storage 事件 。 如 果 通 过 setItem() 方 法 设置 的 键 值 与 原 键 值 相同 ， 也 不 
会 触发 storage 事件 。 无 论 监听 窗口 本 身 是 否 有 数据 变化 , 与 数据 发 生变 化 的 同 源 的 每 个 窗 
口 的 window 对 象 都 会 触发 storage 事件 。 因 此 ，storage 事件 可 用 于 同 源 的 多 页 面 之 间 相 互 


通信 。Web Storage 的 事件 对 象 event 的 属性 包括 : 
值 发 生变 化 〈 被 更 新 或 者 被 删除 ) 的 键 。 


。 key 
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。 oldValue 一 一 更 新 前 的 键 值 。 如 果 是 新 添加 的 数据 ， 则 oldValue 为 null。 

。 newValue 一 一 更 新 后 的 键 值 。 如 果 是 新 删除 的 数据 ， 则 newValue 为 null。 

e url storage 事件 发 生 的 源 。 

。 storageArea 一 一 该 属性 是 一 个 引用 ， 指 向 值 发 生 改变 的 localStorage 或 者 
sessionStorage 对 象 。 


。 Web Storage 存储 的 键 和 值 都 只 能 是 字符 串 。 

。 不 同 的 浏览 器 无 法 共享 localStorage 或 sessionStorage 中 的 信息 。 相 同 的 浏览 器 的 不 
同 页 面 间 可 以 共享 localStorage， 但 是 不 同 页 面 或 标签 页 间 无 法 共享 sessionStorage 
的 信息 。 页 面 及 标签 页 仅 指 顶 级 窗口 ， 如 果 一 个 标签 页 包含 多 个 fame 标签 且 属 于 
同 源 页 面 ， 那 么 可 以 共享 sessionStorage。 

localStorage 的 使 用 示例 可 参考 localStorage.html。 

localStorage.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>localstorage</title> 
<script type="text/javascript"> 
function save(){ 
Var local=document .getElementById ("local") .value; 
localSstorage.setItem("local", local); 
1 
function read(){ 
Var local=localStorage.getItem("local"); 
document .getElementById ("localMsg") .innerHTML=local; 
} 
</script> 
</head> 
<body> 
<hl>localstorage</h1> 
<input type="text" id="local" /> 
<input type="button" value="Save" onclick="save()" /> 
<input type="button" value="Read" onclick="read()" /> 
<p id="localMsg"/> 
</body> 
</html> 


localStorage.html 在 浏览 器 中 的 显示 结果 如 图 4-3 所 示 , 既 可 以 将 页 面 上 的 新 值 保 存 到 
localStorage 中 ， 也 可 在 将 localStorage 中 的 值 读 取 到 页 面 上 显示 。 


N2 
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/ 口 Iocalstorage x\ 


C OH |© 127001:8020/ch 


hello world! 


hello world! 


localStorage 


| | Save |[ Read 


图 4-3 ”localStorage.html 的 显示 结果 


使 用 sessionStorage 实现 计数 器 的 示例 可 参考 sessionStorage.html。 


sessionStorage.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title>sessionStorage</title> 


<script> 
function count() { 


if(typeof (Storage) !== "undefined") { 
if(sessionStorage .getItem("clickCount")) { 


sessionstorage.setItem("clickCount", Number (sessionStorage. 


getItem("clickCount")) + 1); 


} else { 


sessionstorage.setItem("clickCount", 1); 


} 


document .getElementById ("sessionMsg") .innerHTML = "当前 会 话 
中 你 已 单 击 了 按钮 " + sessionstorage.getItem("clickCount") + "次 ! "; 


} else { 
document .getElementById ("sessionMsg") .innerHTML = "对 不 
起 ， 你 的 浏览 器 不 支持 sessionstorage..."; 
1 
} 
</script> 
</head> 
<body> 


<p><input type="button" onclick="count()" value="Button"></p> 


<div id="sessionMsg"></div> 


<p> 单 击 按钮 ， 观 察 单 击 次 数 </p> 


</body> 
</html> 


单 击 按钮 一 次 后 的 sessionStorage html 的 显示 结果 如 图 4-4 所 示 ， 


和 按钮 时 ， 可 
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以 显示 单 击 按钮 的 总 次 数 ， 只 要 当前 会 话 有 效 ， 单 击 按钮 的 次 数 可 以 累加 。 


eles 
多 口 sessionstorage x 岂 


|¢ eoloazaozm 六 | 
Button 


当前 会 话 中 你 已 点 击 了 按钮 1 次 ! 
点 击 按钮 ， 观 察 点 击 次 数 


图 4-4 sessionStorage.html 的 显示 结果 


44 Web SQL 


Web Storage 通过 键 / 值 对 的 形式 保存 数据 ， 在 HIMLS 中 还 可 以 使 用 Web SQL 以 数据 
库 的 形式 存储 数据 , 目前 主流 的 浏览 器 都 已 经 支持 Web SQL。Web SQL API 并 不 是 HTML5 
中 规范 的 一 部 分 , 而 是 一 个 独立 的 规范 , 它 引 入 了 一 组 使 用 SQL 操作 客户 端 数据 库 的 API。 

1. Web SQL 的 方法 

(1) 打开 现 有 的 数据 库 或 者 新 建 数 据 库 的 方法 为 openDatabase(name, version, display, 
estimatedSize)， 其 中 ，name 为 数据 库 名 字 ，version 为 数据 库 版 本 号 ，display 为 数据 库 描 
述 ，estimatedSize 为 预 估 的 数据 库 大 小 。 例 如 : 


Var db = openDatabase ("mydb", "1.0", "test Web SQL", 1024 * 1024); 


(2) 事务 处 理 的 方法 为 transaction()。 
(3) 执行 SQL 语句 的 方法 为 executeSql()。 
2. 创建 数据 表 


db.transaction (function (tx) { 
tx.executesql ("CREATE TABLE IF NOT EXISTS USER (id unique, name)"); 
Fs 


3. 插入 数据 
静态 插入 数据 表 的 记录 : 


db .transaction (function(tx) { 
tx.executesql ("INSERT INTO USER (id, name) VALUES (1, 'zhangsan')"); 
tx.executeSsql ("INSERT INTO USER (id, name) VALUES (2, ‘lisi')"); 

I 


动态 插入 数据 表 的 记录 : 


SN 
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db.transaction (function (tx) { 
tx.executesql ("INSERT INTO LOGS (id, 10g) VALUES (?, ?) ", [eid, ename]); 


其 中 ，eid 和 ename 为 外 部 变量 。 


4. 删除 数据 
静态 删除 记录 : 


db.transaction (function (tx) { 
tx.executeSql ("DELETE FROM USER WHERE id=1"); 
3 


动态 删除 记录 : 


db.transaction (function (tx) { 
tx.executeSql ("DELETE FROM LOGS WHERE id=?", [id]); 


3 
其 中 ，[] 内 的 id 为 外 部 变量 。 
5 修改 数据 
静态 修改 记录 : 
db.transaction (function (tx) { 


tx.executeSql ("UPDATE USER SET name='zhanghua' WHERE id=2"); 
1); 


动态 修改 记录 : 


db.transaction (function (tx) { 
tx.executeSsql ("UPDATE USER SET name='zhanghua' WHERE id=?", [id]); 
和 


6. 查询 数据 


db .transaction (function (tx) { 
tx.executesql ("SELECT * FROM USER", [], function(tx, results) { 
Var len = results.rows.length; 
msg = "<p> 查 询 记录 条 数 : " + len + "</p>"; 
document .getElementById("result") .innerHTML += msg; 
for(i = 0; i < len; i++) { 
msg = "<p><b>" + results.rows[i].id + "gnbsp; &nbsp;" +results. 
rows[i] .name + "</b></p>"; 
} 
}, null); 


使 用 Web SQL 连接 数据 库 、 创 建 数 据 表 、 插 入 记录 、 查 询 记 录 的 示例 可 参考 
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WebSQL1 html。 
WebSQL1 .html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>WebsQL 应 用 </title> 
<script type="text/javascript"> 
Var db = openDatabase ("mydb", "version 1.0", "test Web SQL"，1024 
* 1024); 
function save() { 
db.transaction (function(tx) { 
tx .executeSql ("CREATE TABLE IF NOT EXISTS USER (id unique, 
name)"); 
tx .executeSql ("INSERT INTO USER (id, name) VALUES (1, 'wangnana')"); 
tx.executeSql ("INSERT INTO USER (id,name) VALUES(2,'limei')"); 
tx.executesq] ("INSERT INTO USER(id, name) VALUES (3, 'wangmingming')"); 
tx .executeSql ("INSERT INTO USER (id, name) VALUES (4, 'zhenglan')"); 
var msg = "完成 数据 插入 "; 
document .getElementById ("msg") .innerHTML = msg; 
7); 
} 
function show() { 
db .transaction (function(tx) { 
tx.executeSql ("SELECT * FROM USER", [], function(tx, results) { 
Var len = results.rows.length; 
var i; 
var msg; 
msg = "查询 记录 数 : " + len + " 行 <br />"; 
for(i = 0; i < len; i++) { 
msg = msg + results.rows.item(i) .id + "gnbsp; gnbsp;" + 
results.rows.item(i) .name + "<br />"; 
} 
document .getElementById ("msg") .innerHTML = msg; 
hr DVL 
]) 7 
} 
</script> 
</head> 
<body> 
<input type="button" value=" 插 入 数据 " onclick="save()" />&nbsp; gnbsp; 
<input type="button" value=" 显 示 数 据 " onclick="show()" /> 
hp > 
<div id="msg"></div> 
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</body> 
</html> 


WebSQL1.html 在 浏览 器 中 的 显示 效果 如 图 4-5 所 示 。 插 入 数据 后 显示 数据 的 结果 如 图 
4-6 所 示 。 


D websQusz x NW 


| C 个 10 1270018.， 人 女 


插入 数据 | [ 读 取 数据 
查询 记录 数 ，4 行 


ele 
D websQu x \ 


| GO|©1270018... 人 女 


1 wangnana 
插入 数据 | | 读 取 数据 2 limei 
下 3 wangmingming 
4 zhenglan 
图 4-5 WebSQL1.html 的 显示 结果 图 4-6 显示 数据 的 结果 


使 用 Web SQL 动态 保存 数据 的 示例 可 参照 WebSQL2.html。 
WebSQL2.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 动 态 保存 数据 </title> 
<style type="text/css"> 
input { 
width: 100px; 
} 
</style> 
<script type="text/javascript"> 
Var db = openDatabase ("mydb", "version 1.0", "test Web SQL", 1024 
* 1024); 
db .transaction (function (tx) { 
tx.executesql ("CREATE TABLE IF NOT EXISTS USER (id unique, name) "); 
]) 


function save() { 

var id = document .getElementById("id") .value; 

Var name = document .getElementById ("name") .value; 

db .transaction (function (tx) { 
tx.executesql ("CREATE TABLE IF NOT EXISTS USER (id 
unique,name) "); 
tx.executesql ("INSERT INTO USER (id,name) VALUES(?,?)", 
[id, name]); 
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var msg = "完成 数据 插入 "; 
document .getElementById ("msg") .innerHTML = msg; 
a 
} 
function show() { 
db.transaction (function(tx) { 
tx.executeSq] ("SELECT * FROM USER", [],function(tx, results) { 
Var len = results.rows.length; 
var i; 
var msg; 
msg = "查询 记录 数 : " + len + " 行 <br />"; 
for(i = 0; i < len; i++) { 
msg = msg + results.rows.item(i) .id + "gnbsp; &nbsp;" 
+ results.rows.item(i) .name + "<br />"; 
} 
document .getElementById ("msg") .innerHTML = msg; 
}, null); 
]) 7 
} 
</script> 
</head> 
<body> 
id(1~10) :<input type="number" required min="1" max="10" id="id" /><br /> 
<br /> name: 
<input type="text" required id="name" /><br /><br /> 
<input type="button" value=" 保 存 数据 " onclick="save()" />&nbsp; gnbsp; 
<input type="button" value=" 读 取 数 据 " onclick="show()" /> 


<hr /> 
<div id="msg"></div> 
</body> 
</html> 


在 浏览 器 中 打开 WebSQL2.html， 没 有 保存 数据 之 前 读 取 数据 的 显示 结果 如 图 4-7 所 
示 。 保 存 3 条 记录 之 后 读 取 数据 的 显示 结果 如 图 4-8 所 示 。 


le x 


口 动 术 保存 数据 X 是 
C 全 10 1270018. 女 | 


id(l~10) 扫 


namezhenglei 
id(1~10)} 


[保存 数据 “| [。 读 取 数据 
name 
查询 记录 数 ，3 行 
[保存 数据 读 取 数 据 I 
a 2 limei 
查询 记录 数 ，0 行 3 zhenglei 
电 [ J| 


图 4-7 没有 数据 时 的 显示 结果 图 4-8 保存 数据 之 后 的 显示 结果 


“ep 
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依照 上 述 例 子 还 可 以 完成 数据 的 查询 和 删除 ， 感 兴趣 的 读者 可 以 自行 完成 ， 此 处 不 再 
效 述 。 

注意 : 如 果 不 是 绝对 需要 ， 建 议 不 要 使 用 Web SQL， 因 为 它 会 使 代码 更 加 复杂 。 在 大 
多 数 情况 下 ,localStorage 和 sessionStorage 就 可 以 完成 必要 的 存储 任务 ,尤其 是 localStorage 
能 够 完成 对 象 持 久 化 的 本 地 存储 。 


小 结 


HTML5 中 可 以 通过 audio 元 素 在 页 面 中 插入 音频 , 不 需要 任何 插件 的 支持 就 可 以 播 
音频 。 

HTML5 中 可 以 通过 audio 元 素 在 页 面 中 插入 视频 , 不 需要 任何 插件 的 支持 就 可 以 播 

放 视 频 。 

。 HTML5 提供 了 Web Storage 和 Web SQL 实现 本 地 化 数据 存储 。 

。 Web Storage 提供 了 两 种 在 客户 端 存储 数据 的 方法 ， 分 别 为 localStorage 和 

sessionStorage。 

localStorage 可 以 实现 持久 化 本 地 数据 存储 。 

。 sessionStorage 存储 的 数据 只 在 当前 会 话 内 有 效 ， 会 话 失效 时 ， 数 据 也 随 之 失效 。 

使 用 Web SQL 可 以 在 客户 端 创建 数据 库 、 打 开 数 据 表 、 揪 入 记录 、 修 改 记 录 、 删 

除 记录 、 查 询 记录 等 。 


A 


题 


1. 用 于 播放 视频 的 HTMLS 元 素 是 % 
A. <movie> 
B. <media> 
C. <video> 
D. <mp3> 
2. 用 于 播放 音频 的 HIMLS 元 素 是 〈 这 
A. <mp3> 
B. <audio> 
C. <sound> 
D. <video> 
3. HTMLS5 不 支持 的 视频 格式 是 (  ”)。 
A. OGG 
B. MP4 
C. FLV 
D. WebM 
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. 下 列 ( ”) 不 是 HTMLS5 特有 的 存储 类 型 。 

A. localStorage 

B. Cookie 

C. Application Cache 

D. sessionStorage 

.下 列 关 于 HIML5 中 video 元 素 说 法 正确 的 是 ( )。 

A. 当前 ，video 元 素 支 持 3 种 视频 格式 ， 即 OGG、MP3、WebM 
了 .source 元 素 可 以 添加 多 个 资源 ， 浏 览 器 将 播放 第 一 个 可 以 识别 类 型 的 资源 
C. loop 属性 可 以 使 媒体 自动 播放 

D. 以 上 说 法 都 正确 

.Web Storage 提供 了 哪 两 种 本 地 存储 的 方法 ? 二 者 有 什么 区 别 ? 
.localStorage 提供 了 哪些 常用 的 方法 ? 各 有 什么 作用 ? 


离 线 应 用 和 Web Workers | 


GT HTML5 离线 应 用 概述 


Web 应 用 程序 的 资源 都 是 存储 在 Web 服务 器 上 的 ， 如 果 客 户 端 无 法 连接 网 络 ， 或 者 
Web 服务 器 不 能 提供 服务 ， 又 或 者 是 网 速 较 慢 ， 那 么 传统 的 Web 应 用 程序 就 无 法 运行 了 。 
目前 ， 基 于 Web 的 应 用 程序 越 来 越 普 遍 ， 也 越 来 越 复 杂 ， 因 此 访问 Web 应 用 程序 的 速度 
就 显得 尤为 重要 。 提 高 Web 应 用 程序 的 访问 速度 有 许多 方法 ， 网 页 缓存 是 其 中 之 一 ， 但 是 
网 页 缓存 仍然 要 依靠 互联 网 ， 并且 因 便携 性 和 网 络 性 能 等 原因 ， 网 页 缓存 对 移动 Web 应 用 
程序 的 实际 效果 影响 并 不 大 。 

HTMLS5 离线 缓存 又 名 为 ApplicationCache， 是 从 浏览 器 的 缓存 中 分 出 来 一 块 缓存 区 ， 
用 来 存储 一 定 的 资源 ， 是 属于 HIMLS 的 新 特性 。HTMLS5 使 用 离线 缓存 机 制 , 将 构成 Web 
应 用 程序 的 资源 文件 ， 例 如 HIML 文件 、CSS 文件 、JavaScript 脚本 等 存储 到 本 地 缓存 中 ， 
这 样 可 以 使 Web 应 用 程序 在 离线 状态 时 也 能 正常 工作 。 

Web 应 用 程序 的 离线 缓存 和 浏览 器 的 网 页 缓存 有 明显 的 区 别 ， 主 要 表现 为 以 下 几 点 。 

1. 缓存 目标 

离线 缓存 的 目标 是 整个 Web 应 用 程序 ， 而 浏览 器 的 网 页 缓存 针对 的 是 单个 网 页 。 任 何 
网 页 都 具有 网 页 缓存 ， 而 离线 缓存 只 会 保存 指定 的 资源 。 

2. 安全 性 

离线 缓存 的 安全 性 优 于 浏览 器 网 页 缓存 。 浏 览 器 网 页 缓存 是 强制 进行 的 。 而 对 于 离线 
缓存 ， 可 以 指定 被 缓存 的 资源 ， 还 可 以 利用 编程 手段 来 控制 缓存 的 更 新 ， 可 以 利用 缓存 对 
象 的 各 种 属性 、 状 态 和 事件 来 开发 Web 应 用 程序 。 

3. 对 互联 网 的 依赖 

有 些 网 页 缓存 会 主动 保存 缓存 文件 以 加 快 网 站 的 加 载 速度 ， 但 是 必须 要 有 有 效 的 网 络 
连接 。 如 果 启 动 了 网 页 缓存 ， 但 是 没有 有 效 的 网 络 连接 ， 则 客户 端 会 收 到 无 法 连接 到 服务 
器 的 错误 提示 信息 。 而 对 于 离线 缓存 来 说 , 可 以 在 有 网 络 连 接 时 从 服务 器 获取 指定 的 资源 ; 
当 无 网 络 连 接 时 ， 利 用 离线 缓存 的 资源 仍然 可 以 访问 Web 应 用 程序 。 
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6k2 ApplicationCache 对 象 


JavaScript 为 HIMLS 的 离线 存储 这 一 新 特性 提供 了 专门 的 接口 ， 即 ApplicationCache 
API。 当 把 缓存 文件 保存 到 本 地 时 ， 如 果 缓 存 的 文件 有 更 新 ， 需 要 更 新 本 地 的 缓存 文件 。 
利用 ApplicationCache API 可 以 动态 地 控制 缓存 ,新 的 window.applicationCache 对 象 可 以 触 
发 一 系列 与 缓存 状态 有 关 的 事件 。applicationCache 对 象 和 缓存 宿主 的 关系 是 一 一 对 应 的 ， 
window 对 象 的 applicationCache 属性 会 返回 关联 window 对 象 的 活动 文档 的 
ApplicationCache 对 象 。 

HTMLS5 的 新 特性 并 没有 得 到 所 有 浏览 器 的 支持 ， 离 线 缓存 也 一 样 。IE9 及 IE9 以 下 的 
浏览 器 目前 不 支持 离线 缓存 。 可 以 使 用 以 下 代码 检测 客户 端的 浏览 器 是 否 支持 离线 缓存 。 


<script type="text/javascript"> 


if (window.applicationCache){ 
alert ("支持 离线 缓存 ") ; 
} 
elsef{ 
alert ("不 支持 离线 缓存 ") ; 
} 
</script> 


5.2.1 属性 


applicationCache 对 象 的 status 属性 可 以 返回 当前 applicationCache 的 状态 , 它 的 可 取 值 
及 其 解释 如 下 所 示 。 
。0: 表示 UNCACHED， 未 缓存 ，applicationCache 对 象 的 缓存 宿主 与 应 用 缓存 无 
。 1: 表示 IDLE， 空 闪 ， 应 用 缓存 已 经 是 最 新 的 ， 并 且 没 有 标记 为 obsolete。 
。 2: 表示 CHECKING, 检查 中 ，applicationCache 对 象 的 缓存 宿主 已 经 和 一 个 应 用 组 
存 关 联 ， 并 且 该 缓存 的 更 新 状态 是 checking。 
。 3: 表示 DOWNLOADING， 下 载 中 ，applicationCache 对 象 的 缓存 宿主 已 经 和 一 个 
应 用 缓存 关联 ， 并 且 该 缓存 的 更 新 状态 是 downloading。 
。 4: 表示 UPDAIEREADY， 更 新 就 绪 ，applicationCache 对 象 的 缓存 宿主 已 经 和 一 个 
应 用 缓存 关联 ， 并 且 该 缓存 的 更 新 状态 是 idle， 并 且 没 有 标记 为 obsolete, 但 是 缓存 
不 是 最 新 的 。 
。 5: 表示 OBSOLETE， 过 期 ，applicationCache 对 象 的 缓存 宿主 已 经 和 一 个 应 用 缓存 
关联 ， 并 且 该 缓存 的 更 新 状态 是 obsolete。 
如 果 Web 应 用 程序 没有 使 用 离线 缓存 ， 即 没有 指定 缓存 清单 , 则 这 些 页 面 的 状态 就 是 
UNCACHED (未 缓存 )。IDLE (空闲 ) 是 缓存 清单 中 资源 的 典型 状态 ， 处 于 空闲 状态 说 明 


YY 
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应 用 程序 的 所 有 资源 已 经 缓存 ， 当 前 不 需要 更 新 。 如 果 缓 存 曾经 是 有 效 的 ， 但 是 当前 状态 
下 缓存 清单 已 经 丢失 ， 则 缓存 进入 OBSOLETE (过 期 ) 状态 。 


5.2.2 事件 
对 于 不 同 的 状态 ，ApplicationCache API 提供 了 特定 的 事件 和 回调 特性 ， 例 如 当 缓 存 


更 新 完成 进入 空闲 状态 时 ， 会 触发 cached 事件 。applicationCache 缓存 对 象 的 事件 如 下 
所 示 。 


checking: 当 检 查 更 新 时 ， 或 者 第 一 次 下 载 manifest 清单 时 ，checking 事件 第 一 个 
被 触发 。 

noupdate: 当 检 查 到 manifest 清单 文件 不 需要 更 新 时 ， 触 发 该 事件 。 

downloading: 第 一 次 下 载 或 者 更 新 manifest 清单 时 ， 触 发 该 事件 。 

progress: 该 事件 与 downloading 事件 类 似 , 但 downloading 事件 只 触发 一 次 , progress 
事件 在 清单 文件 下 载 过 程 中 可 以 周期 性 被 触发 。 

cached: 当 manifest 清单 文件 下 载 完 毕 及 成 功 缓存 后 ， 触 发 该 事件 。 

updateready: 此 事件 的 含义 表示 缓存 清单 文件 已经 下 载 完毕 ， 可 通过 重新 加 载 页 面 
读 取 缓存 文件 或 者 通过 swapCache() 方 法 切换 到 新 的 缓存 文件 。 

obsolete: 如 果 访 问 manifest 缓存 文件 返回 HTTP404 错误 请 求 的 资源 找 不 到 或 者 
已 经 被 删除 ) 或 者 410 错误 〈 请 求 的 资源 已 经 被 删除 )， 则 触发 该 事件 。 


6.3， 离 线 缓存 的 实现 


使 用 离线 缓存 需要 经 过 以 下 几 个 步骤 。 
1. 配置 服务 器 manifest 文件 的 MIME 类 型 
离线 存储 通过 manifest 文件 来 管理 ， 需 要 Web 服务 器 的 支持 ， 不 同 的 Web 服务 器 的 
配置 方式 不 同 。 以 Tomcat 服务 器 为 例 ， 需 要 修改 web.xml 文件 ，web.xml 文件 一 般 位 于 
Tomcat 安装 目录 下 的 conf 目录 下 ， 需 要 在 web.xml 文件 中 添加 以 下 代码 : 
<mime-mapping> 
<extension>manifest</extension> 
<mime-type>text/cache-manifest</mime-type> 
</mime-mapping> 
注意 : <extension> 标 签 和 </extension> 标 签 中 的 内 容 必 须 和 manifest 清单 文件 的 后 级 名 
所 全 一 殖 s 
2. 编写 manifest 文件 
离线 缓存 的 Web 应 用 程序 中 包括 一 个 manifest 清单 文件 , 此 文件 实际 上 是 一 个 文本 文 
件 , 列 出 了 需要 离线 缓存 的 所 有 资源 。 manifest 文件 的 第 一 行 必须 是 以 CACHE MANIFEST 
开头 ， 注 释 以 # 开 头 。 例 如 ， 下 列 代码 为 一 个 完整 的 manifest 文件 的 内 容 。 
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CACHE MANIFEST 
#version 1.0 
index.html 
css/my.css 
image/f1.jpg 
image/f2.jpg 
js/min.js 
NETWORK: 
image/button.jpg 
CACHE: 
image/girl.jpg 
FALLBACK: 
/app/ajax/default .html 


manifest 文件 可 以 分 为 3 个 部 分 。 在 以 上 代码 中 ， 第 一 行 是 必需 的 。 如 果 manifest 文 
件 以 及 manifest 文件 所 列 出 的 资源 无 法 加 载 ， 整 个 缓存 的 更 新 过 程 则 无 法 进行 ， 浏 览 器 会 
使 用 最 后 一 次 成 功 的 缓存 。 在 CACHE MANIFEST 下 列 出 的 资源 将 在 首次 访问 后 缓存 到 本 
地 。 在 NETWORK 下 列 出 的 文件 是 每 次 访问 都 需要 与 服务 器 连接 ， 从 服务 器 获取 资源 ， 并 
上 且 不 会 被 缓存 。NETWORK 是 需要 每 次 都 请 求 服务 器 加 载 的 文件 ， 可 以 使 用 星 号 来 指示 其 
他 所 有 资源 /文件 都 需要 Intemet 连接 。 在 FALLBACK 下 列 出 的 文件 指定 如 果 无 法 建立 网 
络 连接 时 的 回 退 页 面 ,例如 上 述 代码 中 如 果 无 法 访问 /app/ajax/ 下 的 资源 , 则 使 用 defaulthtml 
替代 其 内 容 。CACHE、NETWORK、FALLBACK 在 manifest 中 的 顺序 是 任意 的 ， 每 一 部 
分 可 以 出 现 一 次 或 多 次 。CACHE 是 必需 的 ，NETWORK 和 FALLBACK 是 可 选 的 。 

3. 在 页 面 的 html 标签 中 定义 manifest 属性 引用 manifest 文件 

manifest 属性 规定 了 文档 的 缓存 manifest 的 地 址 ，Web 应 用 程序 中 每 个 要 缓存 的 资源 
页 面 都 要 包含 manifest 属性 。 可 以 使 用 绝对 的 URL， 例 如 http:/www.example.comy/ 
demo.manifest; 也 可 以 使 用 相对 的 URL， 例 如 demo.manifest。 


6.4 离线 缓存 的 更 新 


如 果 已 经 完成 了 Web 服务 器 的 配置 、manifest 文件 的 编写 、html 标签 manifest 属性 的 
设置 ， 则 manifest 文件 中 指定 的 资源 已 经 可 以 实现 离线 缓存 。 但 是 如 果 Web 应 用 程序 的 内 
容 发 生 了 更 改 ， 并 且 已 上 传 到 服务 器 ， 结 果 会 发 现 客户 端 访 问 服务 器 时 并 没有 看 到 最 新 的 
结果 ， 这 是 因为 HIML5 的 离线 缓存 还 没有 更 新 。 更 新 HIMLS 的 离线 缓存 主要 有 3 种 
方法 。 

1， 清除 离线 缓存 的 资源 

不 同 的 浏览 器 清除 离线 缓存 资源 的 方法 不 一 定 相 同 ， 有 的 浏览 器 只 清除 历史 记录 是 无 
法 清除 离线 缓存 的 资源 的 。 以 Chrome 浏览 器 为 例 ， 输 入 chrome://appcache-internals/， 可 
以 查看 本 地 的 离线 缓存 ， 也 可 以 进行 删除 。 
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2. 更 新 manifest 文件 

当 浏 览 器 检测 到 manifest 文件 更 新 后 ， 会 主动 更 新 本 地 缓存 。 假 如 没有 更 新 manifest 
文件 ， 即 使 对 缓存 清单 里 的 资源 进行 了 修改 ， 浏 览 器 依旧 会 顽强 地 从 本 地 缓存 里 面 读 取 修 
改 之 前 的 文件 。 在 manifest 文件 中 ， 以 “# ”开头 的 是 注释 行 ， 但 也 可 满足 其 他 用 途 。 例 如 ， 
修改 注释 行 中 的 日 期 和 版 本 号 是 一 种 使 浏览 器 重新 缓存 文件 的 办 法 。 

3. 使 用 applicationCache 对 象 的 update() 方 法 更 新 资源 

如 果 要 以 编程 的 方式 更 新 缓存 ， 并 且 已 经 更 新 了 manifest 文件 ， 需 要 先 调 | 
applicationCache update() 方 法 ， 此 操作 将 尝试 更 新 用 户 的 缓 在。 然后 ， 当 applicationCache. 
status 处 于 UPDATEREADY 状态 时 ， 调 用 applicationCache.swapCache() 即 可 将 原 缓存 换 
成 新 组 在。 例如 : 


var appCache = window.applicationCache; 
appCache.update(); 


if (appCache.status == window.applicationCache.UPDATEREADY) { 
appCache.swapCache () 7 
} 


以 上 方式 只 是 使 浏览 器 检查 是 否 有 新 的 manifest 清单 ， 下 载 指定 的 更 新 内 容 以 及 更 新 
离线 缓存 。 如 果 要 向 用 户 提供 最 新 的 资源 ， 还 需要 两 次 重新 加 载 资源 ， 一 次 是 获得 新 的 应 
用 缓存 ， 一 次 是 刷新 资源 。 

如 果 要 避免 重新 加 载 资源 的 麻烦 ， 可 以 使 用 监听 器 ， 以 监听 网 页 加 载 时 的 updateready 
事件 。 例 如 ， 


window.addEventListener ("load", function(e) { 
window.applicationCache.addEventListener ("updateready", function(e) { 
if (window.applicationCache.status 一 window.applicationCache. 
READY) { 
window.applicationCache.swapCache (); 
if(confirm(" 服 务 器 有 更 新 ， 是 否 重新 装载 ? ")) { 
window.location.reload () 7 
} 
} else { 
console.10g ("manifest 没有 改变 "); 
J false)s 
ji false)s 


6.5， 离 线 缓存 应 用 示例 


5.5.1 缓存 首页 


本 示例 为 一 个 简单 的 首页 缓存 。 首先 新 建 Web 应 用 程序 ch05, 并 创建 首页 index.html， 
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以 及 其 引用 的 样式 表 my.css。 配 置 Tomcat 服务 器 的 manifest 清单 文件 的 MIME 类 型 。 然 
后 创建 manifest 文件 ,命名 为 mdexmanifest。 最 后 在 index.html 的 html 标签 中 添加 manifest 
属性 ， 并 指明 使 用 的 manifest 清单 。 使 用 JavaScript 实现 自动 更 新 。 全 部 完成 以 后 的 各 文 
件 代 码 如 下 所 示 。 

index.html: 


<!DOCTYPE html> 
<html manifest="index.manifest"> 
<head> 
<title> 缓 存 首页 < 人 title> 
<link rel="stylesheet" type="text/css" href="css/my.css"> 
<script type="text/javascript"> 
window.addEventListener ("load", function(e) { 
window.applicationCache.addEventListener ("updateready", function (e) { 
if (window.applicationCache.status 一 window.applicationCache. 
EADY) { 
window.applicationCache.swapCache (); 
if (confirm(" 服 务 器 有 新 版 本 的 资源 ， 是 否 加 载 ? ") ) { 
window.location.reload(); 
} 
} else { 
console.10g ("manifest 没有 改变 "); 
} 


}, false); 
}, false); 

</script> 
</head> 
<body> 

<h1> 这 是 我 的 首页 ! </h1> 
</body> 

</html> 

my.css: 


QCHARSET "UTF-8"; 
hit{ 
color:green; 


index.manifest: 


CACHE MANIFEST 
#version 1.0 
CACHE: 


index.html 
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Sg 


css/my-css 
NETWORK : 
来 


FALLBACK: 


在 Tomcat 服务 器 上 部 署 Web 应 用 程序 ch05， 启 动 Tomcat 服务 器 ， 请 求 index.html 
的 显示 结果 如 图 5-1 所 示 。 


Sy 口 绥 存 首页 
| € >eC |Q©localhost90.. 人 女 


这 是 我 的 首页 ! 


图 5-1 index.html 的 显示 结果 


如 果 停 止 运行 Tomcat 服务 器 ， 继 续 在 浏览 器 中 请 求 ndex.html， 则 显示 结果 仍然 如 图 
5-1 所 示 。 如 果 没 有 使 用 离线 缓存 index.html， 则 此 时 会 显示 服务 器 连接 错误 的 提示 。 

如 果 要 更 新 index.html 或 者 my.css， 则 需要 同时 更 新 manifest 清单 ， 例 如 将 my.css 中 
hl 的 color 更 改 为 red， 同 时 将 manifest 清单 中 的 版 本 号 更 改 为 #wersion 1.1， 则 重新 请 求 
index.html 时 会 弹出 对 话 框 提示 服务 器 有 新 的 资源 ， 是 否 重新 装载 。 如 果 选 择 是 ， 则 会 以 
新 的 样式 表 泻 染 mdex.html。 


5.5.2 ”缓存 图 像 
与 缓存 首页 类 似 ， 可 以 将 Web 应 用 程序 中 的 图 像 等 资源 缓存 ， 对 应 的 文件 代码 分 别 如 


下 所 示 。 
image.html: 


<!DOCTYPE html> 
<html manifest="image.manifest"> 
<head> 
<meta charset="UTF-8"> 
<title> 缓 存 图 像 </title> 
<script type="text/javascript"> 
window.addEventListener ("load", function(e) { 
window.applicationCache .addEventListener ("updateready", function (e) { 
if (window.applicationCache.status =— window.applicationCache. 
READY) { 
window.applicationCache.swapCache (); 
if (confirm(" 服 务 器 有 新 版 本 的 资源 ， 是 否 加 载 ? ")) { 


window.location.reload(); 
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| 
} else { 


console.1og ("manifest 没有 改变 ") ; 


}, false); 
}, false); 
<ISeripE> 
</head> 
<body> 


<img src="image/backl.jpg" width="120" /> 
<img src="image/back2.jpg" width="120" /> 


</body> 
</html> 


image.manifest: 


CACHE MANIFEST 
#version 1.0 
CACHE: 

image.html 

image/backl.jpg 
NETWORK: 

水 


FALLBACK: 


在 网 页 image.html 中 引用 的 两 个 图 像 backl.jpg 和 back2.jpg， 对 backl.jpg 进行 了 离线 


缓存 ， 但 是 back2.jpg 没有 离线 缓存 。 


此 时 两 幅 图 像 都 可 以 正常 显示 。 当 Web 服务 


当 Web 服务 器 可 以 访问 时 的 显示 结果 如 图 5-2 所 示 ， 
这 止 运行 时 , image.html 的 显示 结果 如 图 5-3 


所 示 ， 此 时 只 有 第 一 幅 图 像 backl.jpg 可 以 正常 显示 ,第 二 幅 图 像 因 为 没有 离线 缓存 ， 所 以 


离线 状态 时 不 能 正常 访问 。 


志 ， 自律? 


5-2 image.html 在 线 状态 时 的 显示 结果 


€6 Web Workers 


5-3 ”image.html 离线 状态 时 的 显示 结果 


在 之 前 的 Web 应 用 程序 中 ,由 于 所 有 的 处 理 都 是 单线 程 执行 ,如果 脚本 的 运行 时 间 较 
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长 ， 界 面 会 一 直 处 于 停止 响应 的 状态 ， 则 用 户 的 体验 效果 不 理想 。Web Workers 为 网 页 的 
脚本 提供 了 一 种 在 后 台 进 程 中 运行 的 方法 。Web Workers 是 运行 在 后 台 的 JavaScript， 不 
会 影响 前 台 页 面 的 性 能 。Web Workers 运行 期 间 ， 页 面 的 单 击 、 选 取 内 容 等 操作 并 不 受 
影响 。 


5.6.1 Web Workers 概述 


Web Workers 允许 开发 人 员 编 写 能 够 长 时 间 运 行 而 不 被 用 户 所 中 断 的 后 台 程 序 ， 去 执 
行事 务 或 者 逻辑 ， 并 同时 保证 页 面 对 用 户 的 及 时 响应 。Web Workers 为 Web 前 端 网 页 上 的 
脚本 提供 了 一 种 能 在 后 台 进 程 中 运行 的 方法 。 一 旦 它 被 创建 ，Web Workers 就 可 以 通过 
postMessage() 方 法 向 任务 池 发 送 任务 请 求 ， 执 行 完 之 后 再 通过 postMessage( 方 法 返回 消息 
给 创建 者 指定 的 事件 处 理 程序 。Web Workers 进程 能 够 在 不 影响 用 户 界 面 的 情况 下 处 理 任 
务 ， 并 且 ， 它 还 可 以 使 用 XMLHttpRequest 来 处 理 IO。 但 是 ， 后 台 进 程 不 能 对 DOM 进 
行 操作 。 如 果 希 望 后 台 程序 处 理 的 结果 能 够 改变 DOM， 只 能 通过 返回 消息 给 创建 者 的 回 
调 函数 进行 处 理 。 

利用 Web Workers 可 以 做 以 下 事情 : 

。 可 以 加 载 一 个 JavaScript 文件 进行 大 量 的 复杂 计算 而 不 挂 起 主 进 程 ， 并 通过 
postMessage、onmessage 进行 通信 。 

可 以 在 Worker 中 通过 importScripts(url) 加 载 其 他 的 脚本 文件 。 

可 以 使 用 setTimeoutO、clearTimeoutO、setInterval0 和 clearInterval0 方 法 。 
口 

口 


可 以 使 用 XMLHttpRequest 进行 异步 请 求 。 

可以 访问 navigator 的 部 分 属性 。 

可 以 使 用 JavaScript 的 核心 对 象 。 

但 是 Web Workers 也 存在 一 些 局 限 性 ， 主 要 表现 在 : 

。 不 能 跨 域 加 载 JavaScript。 

。 Worker 内 的 代码 不 能 访问 DOM。 

。 各 个 浏览 器 对 Web Workers 的 实现 不 完全 一 致 。 

。 某 些 浏览 器 不 支持 Web Workers， 例 如 正 11 之 前 的 浏览 器 。 


5.6.2 ”Web Workers 成 员 


要 使 用 Web Workers 必须 创建 Web Workers 对 象 ， 并 传 入 希望 执行 的 JavaScript 文件 。 

HIML5 中 的 Web workers 分 为 两 种 不 同 的 线程 类 型 ,一 种 称 为 专用 线程 (Dedicated 
Worker); 另外 一 种 称 为 共享 线程 (Shared Worker)，Shared Worker 也 是 Worker, 但 是 多 个 
页 面 可 以 共用 一 个 Shared Worker 后 台 线 程 ， 并 且 可 以 通过 该 后 台 线 程 共享 数据 。 

创建 Worker 的 代码 如 下 。 


Var worker = new Worker (url); 


其 中 ，url 用 于 指定 后 台 JavaScript 脚本 文件 的 URL 地 址 。 
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创建 Shared Worker 线程 的 方法 与 创建 Worker 线程 的 方法 类 似 , 只 是 构造 器 略 有 不 同 。 
Var worker = new SharedWorker (url, [name]) :> 


该 方法 的 第 一 个 参数 用 于 指定 后 台 线 程 文件 的 URL 地 址 , 该 脚本 文件 中 定义 了 后 台 线 程 要 


执行 的 处 理 。 第 二 个 参数 可 选 ， 上 


于 指定 Worker 的 名 称 。 当 用 户 创 建 多 个 Shared Worker 


对 象 时 ， 脚 本 程序 将 根据 创建 Shared Worker 对 象 时 使 用 的 url 参数 与 name 参数 来 确定 是 


和 否 创 建 不 同 的 线程 。 


Web Workers 对 象 发 送 的 消息 和 错误 信息 需要 使 用 事件 监听 器 监听 。 如 果 要 在 Web 


Workers 和 页 面 之 间 


通信 ， 则 需要 通过 postMessage() 函 数 传递 。 在 线程 调 月 


脚本 文件 中 所 有 可 | 


的 变量 、 函 数 与 类 包括 : 


日 的 JavaScript 


<!DOCTYPE html> 


self 一 一 表示 本 线程 范围 内 的 作用 域 。 

postMessage(message) 向 创建 线程 的 源 窗口 发 送信 息 。 

onmessage 一 一 获取 接收 消息 的 事件 句柄 。 

importScript(urls) 一 一 导入 其 他 的 JavaScript 脚本 文件 。 

navigator 对 象 一 一 与 window.navigator 对 象 类 似 ， 可 以 用 来 标识 浏览 器 的 字符 。 
sessionStorage 和 localStorage 一 一 在 线程 中 可 以 使 用 的 Web Storage。 
XMLHttpRequest 一 一 在 线程 中 可 以 处 理 Ajax 请 求 。 

Web Workers 一 一 在 线程 中 可 以 嵌 套 线程 。 
setTimeout()、setInterval()、clearTimeout() 和 clearInterval0 一 一 在 线程 中 可 以 实现 定 
时 处 理 。 

close 一 一 结束 本 线程 。 

eval()、isNaN()、escape() 等 一 一 可 以 使 用 的 所 有 JavaScript 核心 函数 。 

object 一 一 可 以 使 用 本 地 对 象 。 

WebSockets 可 以 使 用 WebSockets API 向 服务 器 发 送 消息 和 从 服务 器 接收 消息 。 


5.6.3 Web Workers 示例 


1. 本 示例 使 用 Web Workers 完成 较 烦 琐 的 计算 
1) 在 主 程序 computeMain.html 中 创建 Worker 实例 
computeMain.html: 


<head> 

<meta charset="UTF-=8"> 

<title> 计 算 </title> 

<script type="text/Javascript"> 

function init() { 

// 创 建 执行 运算 的 线程 
Var worker = new Worker ("js/compute.js"); 
// 接 收 从 线程 中 传 出 的 计算 结果 


worker.onmessage = function (event) { 
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// 使 用 div 显示 计算 结果 
document .getElementById ("result") .innerHTML += event.data + 
bd 
}; 
} 
</script> 


</head> 
<body onload="init ()"> 
<div id="result"></div> 
</body> 
</html> 


2) 在 compute.js 中 调用 postMessage() 方 法 返回 计算 结果 
compute.js: 


var i=0; 
function count(){ 
for (Var j=0,sum=0;j<100;j++){ 
for (var i=0;i<1000000;i++){ 


sum+=i; 


} 

// 向 主线 程 发 送 消 息 

postMessage (sum); 
} 
postMessage ("计算 之 前 的 时 间 : "+new Date()); 
count () 7 
postMessage ("计算 之 后 的 时 间 : "+new Date () ) 7 
close(); 


3) 演示 结果 
在 Chrome 浏览 器 中 请 求 computeMain.html, 其 显示 结果 如 图 5-4 所 示 。 由 于 计算 是 在 
后 台 线 程 进行 的 ， 因 此 并 没有 出 现 停 止 响应 的 现象 。 
le 
口 计算 x 
| C 合 |@ 127.00.1:8020/ch0.， 人 女 


计算 之 前 的 时 间 ，Fri Jun 29 2018 00:04:04 
GMT+0800 (China Standard Time) 
49999950000000 

计算 之 后 的 时 间 : Fri Jan 29 2018 00:04:05 
GMT+0800 (China Standard Time) 


图 5-4 computeMain.html 的 显示 结果 
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2. 后 台 生 成 若干 随机 数 ， 并 将 随机 数 和 其 中 的 素数 发 送 到 前 台 
1) 主 程序 
primeNumberMain.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 从 随机 数 中 选择 素数 </title> 
</head> 
<body> 
<h2> 生 成 的 随机 数 是 : </h2> 
<span id="number"></span> 
<h2> 其 中 的 素数 是 : </h2> 
<span id="result"></span> 
<script type="text/javascript"> 
// 生 成 随机 数 ， 将 结果 存 入 字符 串 str， 使 用 分 号 分 隔 
Var array = new Array(50); 
Var str = "ms 
for(var i = 0; i < 50; i++) { 
array[i] = Math.floor( (Math.random() * 100)); 
if(i != 0) 
Str 1 Mm 
str = str + array[il; 
} 
document .getElementById ("number") .innerHTML = str; 
// 将 生成 的 随机 数 发 送 给 后 台 线 程 
Var worker = new Worker ("js/primeNumber.js"); 
worker.postMessage (str); 
// 接 收 后 台 发 送 的 数据 并 显示 到 页 面 
worker.onmessage = function(event) { 
document .getElementById("result") .innerHTML = event.data; 
} 
</script> 
</body> 
</html> 


2) 脚本 文件 


primeNumber.js: 


onmessage = function (event) { 


Var result = ""; 
// 接 收 前 台 传 送 的 数据 
Var str = event.data; 


// 将 字符 串 分 隔 成 整 型 数组 
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Var array = str.split("™;"); 
// 判 断 素数 
for(var i = 0; i < array.length; i++) { 
var flag = true; 
for(var ] = 2; j < array[il]; j++) { 
if(array[i] %$j= 0) 1{ 
flag = false; 
break; 


} 
if(flag == true && array[i] >= 2) 
result = result + array[i] + "7"7 


| 

// 将 结果 发 送 到 前 台 
postMessage (result); 
// 关 闭 线程 


close(); 


3) 演示 结果 
在 浏览 器 中 请 求 primeNumberMain.html， 其 显示 结果 如 图 5-5 所 示 ， 由 于 生成 的 是 
机 数 ， 因 此 每 次 刷新 显示 的 结果 可 能 不 相同 。 


口 从 随机 数 中 选择 素数 x >> 
€ GC 合 |1@0 127.001:8020/c… 俯 


生成 的 随机 数 是 : 


83:89:90:23:88:75:23:89:41;6:50:64:45:63:48:47 


其 中 的 素数 是 : 


83:89:23:23:89:41;47:73:43:13:79:19:17: 


1 » 
Le S| 


图 5-5 primeNumberMain.html 的 显示 结果 


小 结 


。 HTMLS5 离线 缓存 又 称 为 ApplicationCache， 是 从 浏览 器 的 缓存 中 分 出 来 的 一 块 缓存 
区 ， 在 此 缓存 区 中 可 以 存储 一 定 的 资源 。 


。 JavaScript 为 HIMLS 的 离线 存储 这 一 新 特性 提供 了 专门 的 接口 ， 即 Application 


Cache API。 


习题 


Gan 上 mm 
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applicationCache 对 和 象 的 status 属性 可 以 返回 当前 applicationCache 的 状态 。 

对 于 不 同 的 状态 ,ApplicationCache API 提供 了 特定 的 事件 和 回调 特性 , 例如 当 缓 存 
更 新 完成 进入 空闲 状态 时 ， 会 触发 cached 事件 。 

要 使 用 HTMLS5 的 离线 缓存 需要 经 过 配置 服务 器 manifest 文件 的 MIME 类 型 、 编 写 
manifest 文件 、 在 页 面 的 html 标签 中 定义 manifest 属性 以 引用 manifest 文件 3 个 
步骤 。 

可 以 通过 清除 离线 缓存 的 资源 、 更 新 manifest 文件 、 使 用 applicationCache 对 象 的 
update() 方 法 更 新 本 地 缓存 资源 。 
Web Workers 允许 开发 人 员 编 写 能 够 长 时 间 运 行 而 不 被 中 断 的 后 台 程序 ， 去 执行 事 
务 或 者 逻辑， 并 同时 保证 页 面 对 用 户 的 及 时 响应 。 

Web Workers 可 以 通过 postMessage() 方 法 向 任务 池 发 送 任务 请 求 ， 执 行 完 之 后 再 通 
过 postMessage() 方 法 返回 消息 给 创建 者 指定 的 事件 处 理 程序 。 


.创建 一 个 Worker 线程 的 方法 是 )s 


A. new Worker(url): 
B. create Worker(url); 
C. start Worker(url): 
D. set Worker(ur); 


.Worker 线程 文件 中 使 用 ( ) 方法 向 HTML 页 面 回 传 数据 。 


A. onmessage() 
B. getMessage() 
C. postMessage() 
D. 以 上 都 不 对 


.什么 是 离线 Web 应 用 程序 ? 为 什么 要 开发 离线 的 Web 应 用 程序 ? 
.使 用 离线 缓存 需要 经 过 几 个 步骤 ? 

.manifest 文件 主要 包括 哪些 内 容 ? 

.实现 前 台 页 面 和 后 台 线 程 互相 传递 数据 有 几 种 方法 ? 


Geolocation 地 理 位 置 


.个 概述 


有 些 Web 应 用 程序 需要 获取 用 户 当前 的 地 理 位 置信 息 , 例如 , 在 显示 地 图 时 标注 自己 
的 当前 位 置 。 过 去 , 获取 用 户 的 地 理 位 置信 息 需 要 借助 第 三 方 地址 数据 库 或 专业 的 开发 包 ， 
例如 ，Google Gears API。 

HTMLS5 中 新 增加 了 地 理 位 置 应 用 程序 的 接口 ， 即 Geolocation API， 它 提供 了 可 以 准 
确 感知 浏览 器 用 户 当前 位 置 的 方法 。 如 果 浏 览 器 支持 Geolocation API， 并 且 设 备 具 有 定位 
功能 ， 就 可 以 直接 获取 当前 的 位 置信 息 。Geolocation API 一 般 用 于 移动 设备 的 地 理 定位 ， 
并 可 借助 于 地 理 定位 信息 开发 相关 的 Web 应 用 程序 。 


6.1.1 地 理 位 置 的 表达 


浏览 器 的 地 理 位 置 实 际 上 就 是 安装 浏览 器 的 硬件 设备 的 位 置 ， 例 如 经 度 、 纬 度 等 。 
例如 : 

Latitude: 39.17222, Longitude: -120.13778 
指 的 是 纬度 是 39.17222， 经 度 是 -120.13778， 经 纬度 坐标 既 可 以 使 用 如 上 例 中 的 十 进 制 来 
表示 ， 也 可 以 采用 DMS 角度 格式 ， 例 如 39”20'。HTML5 Geolocation API 获取 的 坐标 格 
式 为 十 进 制 格式 。 除 了 纬度 和 经 度 之 外 ， 还 可 以 获取 海拔 、 精 确 度 、 方 和 向、 速度、 时间 截 
等 地 理 位 置信 息 。 


6.1.2 ”地 理 位 置 的 来 源 


HTML5 的 Geolocation API 不 指定 以 哪 种 底层 技术 来 实现 用 户 的 定位 ， 位 置信 息 的 来 
源 包括 他 定位 、GPS 定位 、Wi-Fi 定位 、 手 机 定位 、 自 定义 定位 等 。 

1. IP 定位 

在 HTML5 Geolocation API 之 前 , 基于 IP 地址 的 地 理 定位 方法 是 获得 位 置信 息 的 唯一 
方式 。 基 于 IP 的 定位 通过 搜索 用 户 的 人 P 地 址 ， 然 后 通过 检索 用 户 注 册 的 物理 地 址 确定 位 
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置信 息 。 此 种 方法 在 服务 器 端 处 理 ， 不 受 地 理 位 置 限制 。 但 是 返回 的 位 置信 息 往往 不 够 
精确 。 

2. GPS 定位 

GPS (全球 定 位 系统 ) 通过 卫星 信号 实现 定位 ， 可 以 提供 很 精确 的 定位 ， 但 需要 专门 
的 硬件 设备 ， 而 且 GPS 定位 需要 的 时 间 可 能 比较 长 ， 不 适合 要 求 快速 响应 的 Web 应 上 
程序 。 

3. Wi-Fi 定位 

基于 Wi-Fi 的 地 理 定位 信息 通过 三 角 距 离 计 算 而 来 ， 三 角 距离 指 的 是 用 户 当前 的 位 置 
到 已 知 的 多 个 Wi-Fi 接 入 点 的 距离 。Wi-Fi 定位 精确 ， 方 便 在 室内 使 用 ， 定 位 简单 、 快 捷 。 
但 是 在 偏远 地 区 等 Wi-Fi 接 入 点 或 者 接 入 点 较 少 的 地 方 定位 效果 不 好 。 

4. 手机 定位 

基于 手机 的 定位 是 通过 用 户 到 一 些 基站 的 三 角 距离 确定 的 ,这 种 方法 通常 和 基于 Wi-Fi 
的 定位 和 基于 GPS 的 定位 结合 起 来 使 用 。 定 位 精确 ， 使 用 方便 , 但 是 在 基站 较 少 的 偏远 地 
区 的 定位 效果 不 理想 。 

5. 自 定义 定位 

除了 以 上 方式 之 外 , 也 允许 用 户 自 定义 位 置 。 用 户 可 以 输入 一 些 表示 地 理 位 置 的 信息 ， 
应 用 程序 通过 信息 确定 地 理 位 置 。 此 种 方法 速度 较 快 ， 可 以 获得 较 精 确 的 定位 ， 但 是 一 旦 
用 户 信 息 发 生变 化 ， 可 能 会 导致 定位 过 时 和 定位 不 准确 的 后 果 。 


€2 Geolocation API 


Geolocation API 用 于 将 用 户 当前 的 地 理 位 置信 息 共享 给 信任 的 站 点 ， 这 涉及 用 户 的 隐 
私 安 全 问题 , 所 以 当 一 个 站 点 需要 获取 用 户 的 当前 地 理 位 置信 息 时 , 浏览 器 会 提示 用 户 “ 允 
许 ” 或 者 “拒绝 ”目前 支持 Geolocation API 的 浏览 器 包括 IE9.0+、FireFox3.5+、Safari5.0+、 
Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+ 等 。 

在 JavaScript 中 可 以 使 用 navigator.geolocation 属性 检测 浏览 器 对 获取 地 理 位 置信 息 的 
支持 情况 。 如 果 navigator geolocation 不 为 null， 则 表明 当前 浏览 器 支持 获取 地 理 位 置 ， 否 
则 表明 不 支持 。 例 如 : 


<script type="text/javascript"> 
function check(){ 
if (navigator.geolocation){ 
alert ("你 的 浏览 器 支持 获取 地 理 位 置信 息 ! "); 
} 
elsef{ 
alert ("你 的 浏览 器 不 支持 获取 地 理 位 置信 息 ! ") 
} 
} 
</script> 
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Geolocation API 位 于 navigator 对 象 之 中 ,包括 3 个 方法 ,分别 是 获取 当前 地 理 位 置信 
息 的 getCurrentPostion() 方 法 、 监 视 地 理 位 置信 息 的 watchPosition(0) 方 法 、 停 止 获取 地 理 位 
置信 息 的 clearWatch() 方 法 。 


6.2.1 获取 当前 地 理 位 置信 息 


获取 用 户 当 前 的 地 理 位 置信 息 的 方法 用 法 如 下 : 
void getCurrentPosition(onSuccess[, onError[, options]]); 


其 中 ， 第 一 个 参数 onSuccess 是 成 功 获取 位 置信 息 时 执行 的 回调 函数 ， 它 是 方法 唯一 必需 
的 参数 。 第 二 个 参数 onError 是 获取 位 置信 息 出 错时 执行 的 回调 函数 ; 在 浏览 器 窗口 打开 
需要 获取 地 理 位 置 的 页 面 时 ， 浏 览 器 会 询问 用 户 是 否 共享 位 置信 息 ， 如 果 拒 绝 共 享 ， 则 会 
发 生 错误 。 rg ei 也 会 发 生 错误 。 第 三 个 参数 options 是 配 
置 项 ， 是 一 些 可 选 参 数 的 列表 。 第 二 个 参数 和 第 三 个 参数 是 可 选 的 。 

1. 第 一 个 参数 

成 功 获取 位 置信 息 时 执行 的 回调 函数 的 使 用 方法 如 下 所 示 : 

navigator.geolocation.getCurrentPosition (function (position){ 

]) 

处 理 函数 中 的 position 对 象 包含 了 用 户 的 地 理 位 置信 息 ， 该 对 象 的 coords 子 对 象 包含 
了 用 户 所 在 的 纬度 和 经 度 信息 ，position.coords. od 表示 纬度 ，position.coords.longitude 
表示 经 度 。 在 Firefox 中 ，position 对 象 还 附带 男 一 个 address 子 对 象 ， 可 以 通过 address 子 
对 象 访问 国家 名 、 城 市 名 甚至 街道 名 , 例如 , position.address.country、 position.address.region、 
Position.address.city 等 。 

position 对 象 的 属性 包括 : 
latitude 一 一 当前 地 理 位 置 的 纬度 。 
longitude 一 一 当前 地 理 位 置 的 经 度 。 
altitude 一 一 当前 地 理 位 置 的 海拔 高 度 。 
accuracy 一 一 获取 到 的 经 度 和 纬度 的 精度 ， 单 位 为 米 。 
altitudeAccuracy 一 一 获取 到 的 海拔 高 度 的 精度 ， 单 位 为 米 。 
heading 一 一 设备 的 前 进 方向 ， 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 表示 。 
speed 一 一 设备 的 前 进 速 度 ， 以 米 / 秒 为 单位 。 
timestamp 一 一 获取 地 理 位 置信 息 时 的 时 间 。 
例如 ，locatel.html， 利 用 getCurrentPosition() 方 法 获取 用 户 当 前 位 置 的 纬度 和 经 度 。 
locatel .html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


第 6 章 ”Geolocation 地 理 位 置 


<title> 获 取 当 前 地 理 位 置 </title> 
<style type="text/css"> 
Lb 
input { 
font-size: 20pt; 
} 
</style> 
<script type="text/javascript"> 
function getLocation() { 
if(navigator.geolocation) { 
navigator.geolocation.getCurrentPosition (function (position) { 
document .getElementById ("msg") .innerHTML = "纬度 : " + 
position.coords.latitude + 
"<br /> 经 度 : " + position.coords.1longitude; 
过 


} else { 
document .getElementById ("msg") .innerHTML = "浏览 器 不 支持 地 
理 定位 ! "; 
} 
. 
</script> 
</head> 
<body> 


<input type="button" value=" 定 位 " onclick="getLocation()" /> 
<br /><br /> 
<div id="msg"></div> 
</body> 
</html> 


在 移动 端 用 浏览 器 请 求 locatel.html， 当 单 击 “ 定 位 ”按钮 并 同意 共享 位 置信 息 时 其 显 
示 结 果 如 图 6-1 所 示 。 


中 国 移动 全 53B/s DtG 四 密令“ 65% 攻 小 半夜 11:40 


Q 


定位 


纬度 : 35.442779 
经 度 : 119.540264 


图 6-1 locate1.html 在 移动 端 浏览 器 的 显示 结果 


2. 第 二 个 参数 

如 果 获 取 地 理 位 置信 息 失 败 , 可 以 通过 getCurrentPosition() 方 法 的 第 二 个 参数 表示 的 回 
调 函 数 将 错误 信息 提示 给 用 户 。 该 回调 函数 使 用 error 对 象 作为 参数 ， 该 对 象 具 有 code 属 
性 和 message 属性 。code 属性 的 可 取 值 及 含义 分 别 为 : 
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。 1 一 一 PERMISSION_DENIED， 表 示 用 户 拒绝 了 位 置 服务 。 

。 2 一 一 POSITION_UNAVAILABLE， 表 示 获 取 不 到 位 置信 息 。 

。 3 一 一 TIMEOUT， 表 示 获 取信 息 超时 。 

。 4 一 一 UNKNOWN ERROR， 表 示 未 知 错误 。 

message 属性 为 一 个 包含 了 错误 信息 的 字符 串 ， 但 是 有 些 浏览 器 并 不 支持 message 
例如 ，locate2.html， 如 果 获 取 定位 信息 错误 ， 则 提示 错误 信息 。 

locate2.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 获 取 当 前 地 理 位 置 出 错 </title> 
<style type="text/css"> 
div, 
input { 
font-size: 20pt; 
} 
</style> 
<script type="text/javascript"> 
function getLocation() { 
if(navigator.geolocation) { 
navigator.geolocation.getCurrentPosition (function (position) { 
document .getElementById ("msg") .innerHTML = "纬度 : " + 
position.coords .latitude +"<br /> 经 度 : " + position. 
coords.longitude; 
}，function (error) { 
Var result = ""; 
Switch (error .code) { 
case 1: 
result 


"位 置 服务 被 拒绝 "; 
break; 
case 2 


result = "获取 不 到 位 置信 息 "; 
break; 


case 3: 


ll 


result = "获取 地 理 信息 超时 "; 
break; 
default: 
} 
document .getElementById ("msg") .innerHTML = result; 


hs 
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} else { 
document .getElementById ("msg") .innerHTML = "浏览 器 不 支持 地 
理 定位 ! "; 
} 
} 
</script> 
</head> 
<body> 


<input type="button"” value=" 定 位 " onclick="getLocation()" /> 
<br /><br /> 
<div id="msg"></div> 
</body> 
</html> 


在 PC 端 用 浏览 器 请 求 locate2.html， 其 显示 结果 如 图 6-2 所 示 。 
在 移动 端的 浏览 器 请 求 locate2.html， 但 是 拒绝 共享 位 置信 息 ， 其 显示 结果 如 图 6-3 
所 示 。 


2 

/D miemon: x (oo 中 国 移动 @ 全 37B/s 3Dt 亿 加 了 迎 全 464% 夯 ] 半夜 12:03 
所 CC 合 |@01270018. 人 ON 

ET 可 到 

定位 Q 
获取 不 到 位 置信 息 守信 

位 置 服务 被 拒绝 
图 6-2 PC 端的 出 错 信息 提示 图 6-3 移动 端的 出 错 信息 提示 


3. 第 三 个 参数 

getCurrentPosition() 方 法 的 第 三 个 参数 表示 一 些 可 选 属性 的 列表 , 可 以 省 略 。 属 性 包括 : 
。 enableHighAccuracy 一 一 是 否 要 求 高 精度 的 地 理 位 置信 息 。 

。 timeout 一 一 超时 限制 ， 单 位 为 毫秒 。 

。 ImaximumAge 一 一 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 ， 单 位 为 毫秒 。 


6.2.2 ”监视 地 理 位 置信 息 


Geolocation 对 象 的 watchPosition() 方 法 用 于 注册 监听 器 ， 在 设备 的 地 理 位 置 发 生 改变 
的 时 候 自 动 被 调用 ， 也 可 以 选择 特定 的 错误 处 理 函 数 。 该 方法 会 返回 一 个 ID， 如 果 取 消 监 
听 可 以 通过 Geolocation 对 象 的 clearWatch() 方 法 传 入 该 ID 实现 取消 的 目的 。watchPosition() 
方法 的 使 用 方法 如 下 : 


watchId = navigator.geolocation. watchPosition (onSuccess[, onErrorl, 


options]]); 
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其 中 ，onSuccess、onError、options 3 个 参数 的 含义 同 getCurrentPosition() 方 法 的 参数 含义 
相同 。 


6.2.3 ”停止 获取 地 理 位 置信 息 


Geolocation 对 象 的 clearWatch() 方 法 用 于 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 。 使 
用 方法 如 下 : 


navigator.geolocation.clearWatch (watchId) ; 


其 中 ， 参 数 watchId 为 watchPosition() 方 法 的 返回 参数 。 


6.3 示例 


6.3.1 使 用 腾讯 地 图 定位 
locate3.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no" /> 
<meta name="format-detection" content="telephone=no"> 
<title> 使 用 腾讯 地 图 </title> 
</head> 
<body> 
<div id="container"></div> 
<div id="info"></div> 
<script src="http://map.qq.com/api/js?v=2.exp" type="text/javascript"> 
</script> 
<script> 
var clientWwidth = document .documentElement.clientWwidth; 
Var clientHeight = document .documentElement.clientHeight; 
Var container = document .getElementById ("container"); 
container.style.width = clientwidth + "px"; 
container.style.height = clientHeight + "px"; 
function getLocation() { 


Var options = { 


enableHighAccuracy: true，// 是 否 要 求 高 精度 的 地 理 信息 ， 默 认为 false 
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maximumage: 1000 // 应 用 程序 的 缓存 时 间 
if(navigator.geolocation) { 


navigator.geolocation.getCurrentPosition (onSuccess, onError, 


options); 
} else { 
console.1og ("你 的 浏览 器 不 支持 获取 地 理 位 置 !") ; 
} 
. 
// 获 取 地 理 位置 成 功 时 
function onSuccess (Position) { 
// 经 度 
var longitude = position.coords.longitude; 
// 纬 度 
Var latitude = position.coords.1latitude; 
7/ 腾讯 地 图 的 中 心地 理 坐 标 


var center = new qq.maps.LatLng (latitude, longitude); 

// 腾 讯 地 图 API 

Var map = new qdq.maps.Map (document .getElementById ("container"), { 
center: center, 
// 初 始 化 地 图 缩放 级 别 
Zoom: 16 

]) 


// 在 地 图 中 创建 信息 提示 窗口 
var infoWin = new qq.maps.Infowindow({ 
map: map 
1); 
// 打 开 信息 窗口 
infoWin.open(); 
// 设 置信 息 窗口 显示 区 的 内 容 
infowWin.setContent ("<div style="'width:200px;padding:10px;'>" + 
"您 在 这 里 <br /> 纬度 : " + Latitude + "<br /> 经 度 : "+ longitude); 
// 设 置信 息 窗口 的 位 置 
infoWin .setPosition (center); 
} 
// 获 取 地 理 位 置 失败 时 
function onErrorl(error) { 
switch(error.code) { 
Case error.PERMISSION DENIED: 
alert ("用 户 拒绝 对 获取 地 理 位 置 的 请 求 ") ; 


break; 
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Case error.POSITION UNAVAILABLE: 
alert ("获取 不 到 用 户 的 地 理 位 置 ") ; 
break; 

Case error.TIMEOUT: 


alert ("请 求 用 户 的 地 理 位 置 超时 ") ; 


break; 

Case error.UNKNOWN ERROR: 
alert (" 未 知 错误 ") ; 
break; 

} 
window.onload = getLocation; 
</script> 
</body> 


</html> 


在 移动 端的 浏览 器 中 请 求 locate3.html， 并 允许 获取 用 户 的 当前 地 理 位 置 ， 其 显示 结果 


如 图 6-4 所 示 。 
中 国 移动 72B/siDi 人 加 闻 仿 “ 咱 45% 厢 ] 上午 10:34 
回 到 Q 
© 
© 广 四 季 花 园 FP 
照 大 学 科技 园 “ 部 
生活 区 文 泽 园 等 一 
东升 园 
文 心脏 Eee | 
| x| 
闫 州 注 。 您 在 这 里 | 
纬度: 35.4427 
| 经 度 : 119.540217 
Ah 
2 
曲阜 师范 夫 学 
(日 照 校 区 》 
, 
东宫 路 伟 风 酒店 


6-4 ”使 用 腾讯 地 图 定位 当前 位 置 


注意 : 如 果 和 要 开发 更 复杂 的 基于 腾讯 地 图 的 应 用 ， 还 需要 在 腾讯 地 图 开发 者 平台 上 注 
册 账 号 ， 下 载 sdkjar 包 或 者 TencentLocationSDK， 并 进行 相应 的 配置 。 在 开发 者 平台 上 申 
请 密 钥 并 配置 在 自己 的 清单 文件 中 才能 获取 定位 所 需要 的 相关 权限 。 
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6.3.2 ”距离 跟踪 器 


对 于 某 些 Web 应 用 来 说 , 仅 获 取 一 次 用 户 的 位 置信 息 是 不 能 满足 需求 的 , 例如 用 户 正 
在 移动 。 随 着 用 户 的 移动 ， 页 面 应 该 不 断 地 更 新 地 理 位 置信 息 。 应 用 程序 可 以 使 
Geolocation 对 象 的 watchPosition() 方 法 进行 重复 性 位 置 更 新 请 求 ， 当 监控 到 用 户 的 位 置 发 
生变 化 时 ， 可 以 获取 新 的 位 置信 息 ， 并 且 可 以 调用 相应 的 函数 进行 处 理 。 

对 于 距离 跟踪 来 说 ， 每 当 监测 到 新 的 地 理 位 置 时 ， 就 和 上 次 保存 的 位 置 进行 比较 并 计 
算 距 离 ， 根 据 两 次 位 置 不 同 的 经 度 和 纬度 可 以 计算 两 点 之 间 的 距离 。toRadians() 方 法 用 于 
将 角度 转化 成 弧度 。distance() 方 法 计算 地 球 上 两 点 之 间 的 距离 ， 假 设 用 户 的 位 置 变化 都 是 
直线 移动 ， 此 方法 计算 的 是 直线 距离 。 

locate4.html: 


<!DOCTYPE html> 
<meta charset="utf-8"> 
<title> 距 离 跟 踪 器 </title> 
<head> 
<style type="text/css"> 
body { 
font-size: 16pt; 
} 
</style> 
</head> 
<body onload="loadDemo()"> 
<h3> 距 离 跟踪 器 </h3> 
<p id="msg"> 该 浏览 器 不 支持 HTML5 Geolocation。</p> 
<h4> 当 前 位 置 </h4> 纬度 : 
<h4 id="latitude"></h4> 经 度 : 
<h4 id="longitude"></h4> 准确 度 : 
<h4 id="accuracy"></h4> 
<h4 id="currentDistance"> 本 次 移动 距离 : 0 米 </h4> 
<h4 id="totalDist"> 总 计 移动 距离 : 0 米 </h4> 
<h4 id="r"></h4> 
<script type="text/javascript"> 
/ /移动 总 距离 
Var totalDistance = 0.0; 
// 上 一 次 的 经 度 和 纬度 
var lastLatitude; 
var lastLongitude; 
// 将 角度 转化 成 弧度 
function toRadians (degree) { 
return degree * Math.PI / 180; 


114 
NM 


Web 编程 基础 一 一 HTML5、CSS3、JavaScript (第 2 版 ) 


} 


} 


} 


} 


// 计 算 地 球 上 两 个 位 置 点 之 间 的 直线 距离 
function distance(latitudel, longitudel, latitude2, longitude?2) 


// 地 球 半径 ， 单 位 为 干 米 
Var R = 63717 
var deltaLatitude = toRadians (latitude2 - latitudel); 
var deltaLongitude = toRadians (longitude2 - longitudel); 
latitudel toRadians (latitudel); 
latitude2 = toRadians (latitude2); 
var a = Math.sin(deltaLatitude / 2) * 
Math.sin(deltaLatitude / 2) + 
Math.cos (latitudel) * 
Math.cos(latitude2) * 
Math.sin(deltaLongitude / 2) * 
Math.sin(deltaLongitude / 2); 
var C = 2 * Math.atan2 (Math.sqrt(a), Math.sqrt(l1 - a)); 
war d= Rw or 


return d; 


// 更 新 提示 信息 


function updateMsg (message) { 


document .getElementById ("msg") .innerHTML = message; 


// 加 载 监听 


function loadDemo() { 


if (navigator.geolocation) { 
updateMsg ("浏览 器 支持 HTML5 Geolocation"); 
// 监 视 用 户 位 置 变化 
navigator.geolocation.watchPosition (updateLocation, 
handleLocationError, { 
maximumAge: 20000 
ys 


// 更 新 位 置信 息 


function updateLocation (position) { 


// 获 取 新 位 置信 息 的 经 度 、 纬 度 、 精 确 度 

var latitude = position.coords.latitude; 

Var longitude = position.coords.1longitude; 

Var accuracy = position.coords.accuracy; 

document .getElementById("latitude") .innerHTML = latitude; 
document .getElementById("longitude") .innerHTML = longitude; 


document .getElementById("accuracy") .innerHTML = accuracy7 
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// 如 果 accuracy 太 大 ， 提 示 不 准确 
if(accuracy >= 500) { 
updateMsg (" 数 据 不 准确 ， 需 要 更 准确 的 数据 来 计算 本 次 移动 距离 ") ; 
return; 
} 
// 如 果 存 在 上 次 位 置信 息 ， 则 计算 移动 距离 
if((lastLatitude != null) && (lastLongitude != null)) { 
var currentDistance = 1000 * distance (latitude, longitude, 
lastLatitude, lastLongitude); 
document .getElementById("currentDistance") .innerHTML = 
"本 次 移动 距离 : " + currentDistance.toFixed(4) + " 米 "; 
// 累 加 总 的 移动 距离 
totalDistance += currentDistance; 
// 提 示 移 动 距离 
document .getElementById ("totalDist") .innerHTML = 
"总 计 移 动 距离 : " + currentDistance.toFixed(4) + " 米 "; 
} 
// 保 存 当 前 的 位 置信 息 
lastLatitude = latitude; 
lastLongitude = longitude; 
updateMsg ("计算 移动 距离 成 功 ") ; 
} 
// 错 误 处 理 
function handleLocationError(error) { 
switch(error.code) { 
case 0: 
updateMsg ("尝试 获取 您 的 地 理 位 置信 息 时 发 生 错 误 : " + error .message); 
break; 
case ls: 
updateMsg ("用 户 拒 绝 了 获取 地 理 位 置信 息 请 求 ") ; 
break; 
case. 2: 
updateMsg ("浏览 器 无 法 获取 您 的 地 理 位 置信 息 : " + error.message); 
break; 
case 3: 
updateMsg ("获取 地 理 位 置信 息 超时 ") ; 


break; 


} 
</script> 
</body> 
</html> 


在 移动 端的 浏览 器 首次 请 求 locate4.html 的 显示 结果 如 图 6-5 所 示 。 
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中 国 移动 0K/s 日 从 四 内 倒 35% 功 小 晚上 7:12 


可 到 OQ 


30 
本 次 移动 距离 ; 0.0000 米 
总 计 移动 距离 : 0.0000 米 


图 6-5 首次 请 求 locate4.html 的 显示 结果 
移动 一 段 距离 后 locate4.html 的 显示 结果 如 图 6-6 所 示 。 
中 国 移动 日 @ ”444B/s 昌 对 图 闻 仿 “ 川 35% 夯 | 晚上 7:06 
回 到 Q 


看 离 眼 踪 器 
计算 移动 距离 成 功 


当前 位 置 : 

纬度 : 

35.442526 

经 度 : 

119.540179 

准确 度 : 

30 

本 次 移动 距离 ; 19.7190 米 
总 计 移动 距离 : 19.7190 米 


图 6-6 ”移动 一 段 距离 后 locate4.html 的 显示 结果 


小 结 


。 HTMLS 中 新 增加 了 地 理 位 置 应 用 程序 的 接口 ， 即 Geolocation API， 它 提供 了 可 以 
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准确 感知 浏览 器 用 户 当前 位 置 的 方法 。 如 果 浏 览 器 支持 Geolocation API， 并 且 设备 
具有 定位 功能 ， 就 可 以 直接 获取 当前 的 位 置信 息 。 
。 可 以 使 用 Geolocation 对 和 象 的 getCurrentPosition() 方 法 获取 用 户 的 地 理 位 置信 息 。 
[以 使 用 Geolocation 对 象 的 watchPosition() 方 法 监视 用 户 的 地 理 位 置信 息 。 
[以 使 用 Geolocation 对 象 的 clearPosition() 方 法 取消 对 用 户 地理 位 置信 息 的 监视 。 
可 以 使 用 Geolocation 对 象 结合 地 图 实现 基于 HIMLS 地 理 定位 的 Web 应 用 ， 例 如 
距离 跟踪 等 。 


耻 器 加 只 


A 


题 


1. 使 用 getCurrentPosition() 方 法 获取 当前 地 理 位 置信 息 ， 返 回 errorPERMISSION- 
DENIED 表示 ( )。 
A. 用 户 拒绝 共享 地 理 位 置 
B， 获取 地 理 位 置 失败 
C. 获取 地 理 位 置 超时 
D. 未 知 错误 
2， 以 下 代码 中 的 maximumAge 指 的 是 〈 )。 
navigator.geolocation.getCurrentPosition (showPosition, showError, { 
enableHighAccuracy: true, 
timeout: 5000, 
maximumAge: 3000 
]) 7 
A， 指 示 浏览 器 获取 高 精度 的 位 置 
B. 指定 获取 地 理 位 置 的 超时 时 间 
C. 最 长 有 效 时 间 ， 在 重复 获取 地 理 位置 时 ， 此 参数 指定 多 久 再 次 获取 位 置 
D. 以 上 都 不 对 
3. 在 HTMLS5 页 面 中 插入 以 下 代码 的 作用 是 )。 


<script src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 


A. 调 取 Google 的 云 服 务 

B. 调 取 Google 的 地 图 服务 

C. 调 取 应 用 服务 接口 

D. 以 上 都 不 对 
4. 计算 机 、 平 板 电脑 、 手 机 等 电子 类 设备 可 以 通过 哪些 途径 获取 地 理 位 置信 息 ? 
5， 简 述 Geolocation 对 象 中 的 各 属性 及 其 含义 。 
6. Geolocation API 的 getCurrentPosition() 方 法 和 watchPosition() 方 法 有 什么 区 别 ? 


二 CSS3 概述 


CSS 指 的 是 Cascading Style Sheets， 即 层 合 样式 表 ， 是 一 种 设计 网 页 样式 及 布局 的 技 
术 。 所 谓 “ 层 营 ”， 实 际 上 指 的 是 将 显示 样式 与 显示 内 容 分 离 。 在 CSS 出 现 之 前 ， 网 页 设 
计 是 采用 HTML 标记 来 定义 页 面 文档 , 通过 指定 相应 标签 元 素 的 属性 值 为 元 素 设 置 显示 样 
式 。 这 种 方式 实现 起 来 非常 烦琐 ， 维 护 困 难 ， 而 且 很 难 做 到 整个 网 站 的 网 页 风格 统一 。 为 
了 解决 设计 样式 和 风格 的 问题 ,1997 年 ，W3C 在 颁布 HIML4 标准 的 同时 也 发 布 了 样式 表 
的 第 一 个 标准 CSS1.0。CSS1.0 较为 全 面 地 规定 了 文档 的 显示 样式 ， 包 括 选择 符 、 样 式 属 
性 、 伪 类 、 伪 元 素 等 几 个 部 分 。 此 后 ， 又 相继 发 布 了 CSS2.0，CSS2.1。 从 2010 年 开始 ， 
W3C 已 开始 了 对 CSS3 的 研发 ,现在 大 部 分 的 浏览 器 已 支持 CSS3, 目前 CSS3 版 本 已 经 比 
较 成 熟 ，CSS4 的 规范 仍 在 制定 中 。 

使 用 CSS 可 以 将 网 页 的 内 容 和 显示 分 离 ， 网 页 的 内 容 仍然 使 用 HIML 实现 ， 而 网 页 
的 显示 样式 使 用 CSS 来 实现 。 使 用 CSS 有 许多 优点 ， 主 要 表现 在 : 

。 CSS 结合 DIV 可 以 方便 地 控制 页 面 布局 ; 

。 整个 网 站 可 以 统一 风格 ， 只 要 整个 网 站 使 用 统一 的 CSS 文件 即 可 ; 

。 网 站 的 风格 维护 起 来 简单 ， 只 需要 更 改 相应 的 CSS 文件 ， 不 需要 更 改 HTML 文件 ; 

。 由 于 HIML 文件 基本 上 只 包含 内 容 ， 不 包括 样式 ， 因 而 结构 简化 ， 体 积 更 小 ， 下 载 

速度 更 快 ， 更 加 灵活 ， 可 读 性 更 强 ; 

。 浏览 器 的 界面 更 友好 。 

1. CSS3 的 优势 

CSS3 是 完全 向 后 兼容 的 ， 相 对 于 CSS2 来 说 ，CSS3 具有 明显 的 优势 ， 主 要 表现 为 : 

1) 开发 与 维护 的 成 本 降低 

如 果 在 CSS2 中 要 实现 圆 角 效果 ， 则 需要 添加 额外 的 HTML 标签 ,并且 需要 结合 图 片 
完成 。 而 在 CSS3 中 新 增 了 许多 属性 ， 其 中 包括 边框 的 border-radius 属性 ， 可 以 直接 实现 
角 效 果 。 如 果 要 修改 圆 角 的 效果 ， 只 需要 修改 CSS3 的 相关 属性 值 即 可 。 

2) 页 面 性 能 提高 
使 用 CSS3 进行 开发 时 ， 减 少 了 多 余 的 标签 嵌 套 以 及 图 片 ， 减 少 了 前 台 开 发 人 员 的 工 

作 量 ， 缩 短 了 其 开发 过 程 。 同 时 ， 用 户 需要 下 载 的 内 容 减 少 ，HTTP 请 求 总 数 减 少 ， 因 而 


贺 


也 加 快 
入 


了 页 面 加 载 的 速度 。 
CSS3 新 增 的 特性 


CSS3 中 新 增 了 许多 特性 ， 主 要 有 : 


以 


过 


属性 选择 符 ， 例 如 [att^="value"]、[att$="value"]、[att*="value"]; 


RGBA 透明 度 ; 

多 栏 布局 ; 

多 背景 图 片 ; 

字符 串 溢出 ; 

块 阴影 与 圆 角 阴影 ; 

圆 角 ; 

边框 图 片 ; 

旋转 、 缩 放 、 倾 斜 等 变形 。 

上 部 分 新 特性 在 后 文 会 进行 详细 介绍 。 


CSS3 的 基本 语法 
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CSS3 的 定义 是 由 3 部 分 组 成 的 ， 包 插 选 择 符 (selector)、 属 性 (properties)、 属 性 的 
取 值 (value)。 其 语法 为 : 


se 


} 


lectort{ 
propertyl: value; 
property2: value; 


propertyN: value; 


其 中 ，selector 是 选择 符 ， 例 如 类 型 选择 符 ， 对 应 的 是 HTML 标签 ，property 是 选择 符 的 属 
性 ，value 为 选择 符 的 属性 值 。 多 个 选择 符 属性 之 间 使 用 分 号 隔 开 。 

可 以 使 用 单个 选择 符 ， 也 可 以 使 用 多 个 选择 符 ， 选 择 符 之 间 用 去 号 隔 开 ， 即 将 一 组 属 
性 值 应 用 于 多 个 选择 符 ， 例 如 : 


body{ 


} 


hl, 


} 


background-color: yellow 


h2, pt{ 
background-color: #00FF00; 


color: red 


上 述 样式 表 定 义 网 页 的 背景 色 为 黄色 ， hl、h2 以 及 p 的 背景 色 为 绿色 ， 文字 颜色 为 红 
色 。 例 如 ，cssl.html。 
cssl.html: 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 类 型 选择 符 </title> 
<style type="text/css"> 
body { 
background-color: yellow 


h27 
pi 
background-color: #00FFO00; 
color= red 
} 
</style> 
</head> 
<body> 
这 是 body 内 的 文字 <br /> 
<h1> 这 是 标题 1 文字 </h1> 
<h2> 这 是 标题 2 文字 </h2> 
<p> 这 是 段落 文字 </p> 
</body> 
</html> 


cssl.html 的 显示 结果 如 图 7-1 所 示 。 
CAOIo 127001:802.. 丛 ， 
这 是 body 内 的 文字 


| 


这 | 


7-1 css1.html 的 显示 结果 


《.3 ”Csss 的 使 用 方式 


在 HIML5 页 面 中 使 用 CSS3 主要 有 4 种 方法 ， 即 内 嵌 方 式 、 内 部 样式 表 、 使 / 


<link> 
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标签 链接 外 部 样式 表 、 使 用 CSS 的 @import 标记 导入 样式 表 。 

1. 内 啼 方式 

内 柑 方 式 指 的 是 将 CSS 规则 混合 在 HTML 标签 中 使 用 ，CSS 规则 作为 HTML 标签 的 
style 属性 值 。 例 如 : 

<a style="font-family: 黑 体 ; font-style:italic; font-size:16pt; color:red"> 

这 是 使 用 样式 的 超级 链接 

</a> 

内 嵌 样 式 只 对 其 所 在 的 标签 起 作用 ， 其 他 的 同类 标签 不 受 影响 。 例 如 ，css2.html。 

css2.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 内 网 样式 表 </title> 
</head> 
<body> 
<a style="font-family: 黑体;font-style:italic;font-size:16pt;color:red"> 
使 用 内 人 嵌 样 式 的 超级 链接 </a> 
<br /><br /> 
<a> 普 通 的 超级 链接 </a> 
</body> 


</html> 


css2.html 的 显示 结果 如 图 7-2 所 示 。 


/Dn x 


| C 全 101270018. 女 | : | 


克 用 内 放样 式 的 超级 颖 稻 
普通 的 超级 链接 


图 7-2 css2.html 的 显示 结果 


内 柑 样 式 表 使 用 起 来 比较 烦琐 ， 虽然 可 以 单独 为 每 一 个 标签 设置 不 同 的 样式 ， 但 是 不 
能 方便 地 为 同类 标签 设置 相同 的 样式 。 

2. 内 部 样式 表 

内 部 样式 表 指 的 是 在 HTML 文档 的 <head> 标 签 内 定义 样式 规则 ， 格 式 如 下 : 


<style type="text/css"> 


selectort{ 


propertyl: value; 


加 图 古 | 
ts CSS3、JavaScript (第 2 版 ) 
加 加 加 | 


property2: value; 


</style> 


内 部 样式 表 的 使 用 可 参照 css3.html。 
css3.html: 


了 D 内 部 样式 表 x 
«> © 0 [Omni 人 


这 是 正文 中 的 字体 


这 是 段落 中 的 文字 ， 会 继承 正文 
字体 的 样式 


这 是 超级 链接 1 
这 是 超级 链接 2 


7-3 css3.html 的 显示 结果 
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内 部 样式 表 的 作用 范围 是 当前 的 HTML 页 面 , 样式 表 中 定义 的 选择 符 的 格式 会 应 用 到 
当前 文件 中 所 有 匹配 的 选择 符 中 。 

有 些 版 本 过 低 的 浏览 器 可 能 不 支持 <style> 标 签 ， 此 时 ， 浏 览 器 会 忽略 <style> 标 签 ， 
<style> 标 签 内 的 内 容 会 以 文本 的 形式 显示 到 页 面 上 。 为 了 避免 此 种 情况 发 生 ， 可 以 在 
<style> 标 签 之 后 添加 “<!--”， 在 </style> 标 签 之 前 添加 “--> ”， 如 果 浏 览 器 不 支持 <style> 标 
签 ， 则 会 忽略 相应 的 代码 。 例 如 : 


<style type="text/css"> 
< = ody 

font-family: 楷体 ; 

font-size: 16pt7 


color: green; 


--> 
</style> 


3. 使 用 <link> 标 签 链 接 外 部 样式 表 

虽然 内 嵌 样 式 表 和 内 部 样式 表 可 以 设计 HTML 页 面 的 样式 , 但 是 当 页 面 较 多 时 ,实现 
和 维护 都 比较 困难 ， 而 且 也 难以 将 多 个 页 面 的 样式 统一 ， 此 时 ， 最 好 使 用 外 部 样式 表 。 外 
部 样式 表 是 使 用 一 个 单独 的 文件 保存 样式 规则 ， 扩 展 名 为 .css， 需 要 使 用 样式 表 的 HTML 
文件 链接 外 部 样式 表 文 件 。 链接 样式 表 使 用 <link> 标 签 ， 此 标签 作为 <head> 的 子 标签 使 用 ， 
指明 当前 HTML 页 面 和 链接 的 样式 表 之 间 的 关系 ， 其 格式 为 : 


<link href=".." rel="stylesheet" type="text/css"/> 


其 中 : 
。 href 是 外 部 样式 表 的 路 径 ， 一 般 使 用 相对 路 径 ; 
。 rel 指 的 是 被 链接 的 文件 的 类 型 ，stylesheet 表示 被 链接 的 是 CSS 文件 ; 
。 type 指 的 是 被 链接 的 文件 的 内 容 类 型 。 
外 部 样式 表 的 使 用 示例 可 参照 style.css 和 css4.html。 


style.css: 


@CHARSET "UTF-8"; 

body { 
font-family: 楷体 ; 
font-size: 16pt; 
color: green; 

’ 

a 
font-family: 黑体 ; 
font-size: 14pt; 
Color: #FF9600; 

1 

div { 
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Color: reds 
font-size: 1l0pt; 
font-weight: bold; 
font-family: 黑体 ; 
border: lpx solid #000; 
} 
pi 
color: blue; 
font-size: 12pt7 
font-style: italic; 


css4.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 外 部 样式 表 </title> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<a> 我 是 超级 链接 </a> 
<div> 我 是 DIV</div> 
<p> 我 是 段落 </p> 
</body> 
</html> 


css4.html 的 显示 结果 如 图 7-4 所 示 。 


图 7-4 css4.html 的 显示 结果 


在 使 用 样式 表 的 各 种 方法 中 , 外 部 样式 表 使 用 最 为 常见 , 使 用 外 部 样式 表 有 以 下 优点 : 

。 样式 可 以 重复 利用 ， 一 个 外 部 CSS 文件 可 以 被 多 个 网 页 使 用 。 

。 修改 、 维 护 简单 。 当 需要 修改 样式 时 ， 只 需要 修改 CSS 文件 ， 不 需要 修改 页 面 源 
代码 。 

。 可 以 有 效 地 减少 页 面 的 代码 量 ， 提 高 网 页 的 加 载 速 度 ，CSS 可 以 驻 留 在 缓存 中 ， 再 
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次 使 用 时 不 需要 重新 加 载 。 
。 整个 网 站 的 风格 很 容易 统一 ， 只 要 网 站 中 的 文件 都 链接 同样 的 CSS 文件 即 可 。 
4. 使 用 CSS 的 @import 标记 导入 样式 表 
除了 可 以 使 用 <link> 标 签 链接 外 部 样式 表 之 外 ， 还 可 以 使 用 CSS 提供 的 @import 标记 
导入 样式 表 ， 其 格式 如 下 : 


<style type="text/css"> 


@import url(™."); 
</style> 


例如 ，css5.html。 
css5.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 eimport 标记 导入 样式 表 </title> 
<style> 
Qimport url("css/style.css"); 
</style> 
</head> 
<body> 
<a> 我 是 超级 链接 </a> 
<div> 我 是 DIV</div> 
<p> 我 是 段落 </p> 
</body> 


</html> 


css5.html 的 显示 结果 与 css4.html 的 显示 结果 相同 ， 如 图 7-4 所 示 。 

使 用 <link> 标 签 链接 样式 表 和 使 用 @import 标记 导入 样式 表 的 方法 类 似 ， 但 是 二 者 仍 
有 区 别 ， 主 要 表现 为 以 下 几 点 。 

1) 引用 资源 的 种 类 

<link> 属 于 XHTML 标签 ，@import 属于 CSS 标记 。<link> 标 签 除了 可 以 链接 CSS 文 
件 之 外 ， 还 可 以 链接 其 他 的 外 部 资源 ， 而 @import 标记 只 能 导入 CSS 文件 。 

2) 加 载 时 间 

当 页 面 加载 时 ，<link> 链 接 的 外 部 资源 会 同时 被 加 载 ， 而 @import 标记 导入 的 CSS 文 
件 会 等 到 页 面 全 部 下 载 完成 后 再 被 加 载 ， 所 以 使 用 @import 标记 导入 CSS 的 页 面 有 可 能 刚 
开始 显示 时 并 没有 样式 。 

3) 浏览 器 的 支持 

@import 标记 只 有 下 5 以 上 的 才能 支持 ， 而 <link> 标 签 无 此 限制 。 

5. 各 种 样式 表 的 优先 级 

以 上 各 种 使 用 样式 表 的 优先 级 顺序 为 : 


125 
™ 


126 
Nt 
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内 嵌 样 式 表 > 内 部 样式 表 > 外 部 样式 表 > 浏览 器 的 默认 设置 

内 嵌 样 式 表 的 实现 相对 来 说 比较 麻烦 ， 基 本 上 相当 于 使 用 标签 的 属性 来 定义 样式 。 但 
是 不 会 因为 网 速 的 问题 导致 样式 无 法 应 用 ， 所 以 对 于 一 些 布局 页 面 ， 建 议 使 用 内 榜样 式 。 
对 于 一 些 布局 之 外 的 其 他 样式 ， 可 以 使 用 外 部 样式 表 来 完成 ， 即 使 样式 表 由 于 网 速 问 题 不 
能 应 用 ， 至 少 不 会 影响 到 页 面 的 布局 。 外 部 样式 表 维 护 、 更 新 都 比较 方便 。 对 于 一 些 有 特 
殊 应 用 的 样式 ， 可 以 使 用 内 部 样式 表 或 内 嵌 样 式 来 补充 。 

另外 ， 如 果 使 用 外 部 样式 表 ， 建 议 使 用 <link> 标 签 来 链接 外 部 样式 表 。 


《4 CSS3 的 继承 


CSS 的 继承 指 的 是 当 标 签 具有 嵌 套 关系 时 ， 内 部 标签 自动 拥有 外 部 标签 的 不 冲突 的 样 
式 的 性 质 。 利 用 CSS 的 继承 特性 ， 开 发 者 可 以 先 对 整个 网 页 的 样式 进行 预 设 ， 在 需要 特别 
指定 样式 的 地 方 再 进行 修改 ， 即 可 取得 较 好 的 效果 。 继 承 是 一 种 机 制 ， 它 允许 样式 不 仅 可 
以 应 用 于 某 个 特定 的 元 素 ， 还 可 以 应 用 于 它 的 子 元 素 。 但 是 当 子 元 素 与 父 元 素 的 属性 样式 
出 现 冲 突 时 ， 子 元 素 的 样式 具有 较 高 的 优先 级 。 

但 是 ， 在 CSS 中 ， 有 些 属性 不 允许 继承 ， 例 如 border 属性 没有 继承 性 ， 如 果 border 
属性 可 以 继承 , 则 某 些 元 素 的 显示 样式 会 比较 奇怪 , 例如 文字 。 不 可 继承 的 属性 包括 border、 
padding、margin、width、height 等 。 例 如 ，css6.html 。 

css6.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS 的 继承 </title> 
<style type="text/css"> 
(ob 
color: red; 
font-size: 10pt7 
font-weight: bold; 
font-family: 黑体 ; 
border: lpx solid #000; 


color: blue; 
font-size: 12pt; 
font-style: italic; 


color: green; 
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</style> 
</head> 
<body> 


<div> 


</div><br /> 


</body> 
</html> 


<p> 这 是 蓝 色 ，12pt， 和 斜体 ， 默 认 宋 体 </p> 
<p> 这 是 蓝 色 ，12pt， 和 斜体 ， 加 粗 ， 黑 体 </p> 
<div> 这 是 红色 ，10pt， 加 粗 ， 黑 体 ， 有 边框 </div><br /> 


<div> 这 是 红色 ，10pt， 黑 体 <br /> 
<em> 我 是 em 元 素 的 文字 ， 绿 色 文字 周围 无 单独 边框 </em></div> 


css6.html 的 显示 结果 如 


ks CSS3 元 素 选 


图 7-5 所 示 。 


六 Css 的 继承 X \ 


[ete e mn) 


CG 合 10 127.00.1:8020/c.， 女 


好 此 谢 外 ，12pt， 座 佐 ， 及 以 闫 八 


| 试 是 误 襄 ，12pt， 千代 ， 加 大 ， 澳 詹 


工 是 红色 ，10pt， 加 各 ， 棱 体 ， 有 边 概 


防 是 红色 ，10pt， 黑 体 
愉 旦 em 元 天 的 这 字 ， 这 各 过 疡 局 肝 下 其 沙 关 


图 7-5 ”css6.html 的 显示 结果 


先 择 符 


CSS3 的 选择 符 有 很 多 种 类 ， 可 以 分 为 元 素 选择 符 、 关 系 选择 符 、 属 性 选择 符 、 伪 类 
选择 符 、 伪 元 素 选 择 符 。 其 中 元 素 选择 符 又 可 以 分 为 通 配 选 择 符 、 类 型 选择 符 、ID 选择 符 、 


类 选择 符 。 


7.5.1 ， 通 配 选 择 符 


通 配 选 择 符 〈*) 用 来 选择 所 有 元 素 ， 也 可 以 选择 某 


二 
margin: Opx; 


padding: Opx; 


个 元 素 下 的 所 有 元 素 。 例 如 : 
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表示 所 有 元 素 的 margin 和 padding 都 为 0。 
例如 : 
-Ted * { 


font-weight: bold; 
} 


表示 类 red 的 所 有 后 代 元 素 。 
但 是 ， 由 于 通 配 选择 符 会 匹配 所 有 的 元 素 ， 会 影响 网 页 演 染 的 时 间 ， 因 此 不 推荐 频繁 
使 用 通 配 选 择 符 ， 最 好 把 所 有 需要 统一 设置 的 元 素 罗列 出 来 ， 使 用 逗号 分 隔 。 


7.5.2 ”类 型 选择 符 


类 型 选择 符 (E) 也 称 为 HTML 选择 符 ， 所 有 的 HTML 标签 都 可 以 作为 类 型 选择 符 ， 
类 型 选择 符 后 是 对 应 的 元 素 的 属性 及 属性 值 。 一 旦 指定 了 类 型 选择 符 的 样式 ， 则 相应 元 素 


会 自动 套用 定义 的 样式 。 
如 果 属 性 的 值 是 由 多 个 单词 组 成 的 ， 则 属性 值 必须 加 上 引号 才 可 以 被 识别 ， 例 如 : 
pt{ 


font-family: "Courier New" ; 
} 


表示 将 段落 的 字体 设置 成 Courier New。 
类 型 选择 符 后 的 属性 必须 是 对 应 的 标签 元 素 的 有 效 属性 ， 否 则 属性 和 属性 值 无 效 ， 
例如 : 
pt{ 
text-align: center; 


color: red 
} 


表示 将 段落 的 对 齐 方式 设置 成 居中 对 齐 ， 文 字 颜 色 为 红色 。 
7.5.3 ID 选择 符 


当 需 要 为 某 一 个 元 素 单独 设计 样式 时 ， 可 以 使 用 这 选 择 符 〈E 此 d)。 使 用 id 选择 符 可 
以 为 元 素 的 具体 对 象 定 义 不 同 的 样式 ， 使 用 id 选择 符 要 先 为 设计 样式 的 对 象 定义 一 个 id 
属性 。id 选择 符 是 唯一 的 ， 不 同 的 元 素 的 id 值 是 不 能 重复 的 。 例 如 : 

<div id="top"></div> 
然后 使 用 以 下 方式 定义 top 的 样式 : 


#top{ 
propertyl: value; 
property2: value; 
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} 


id 选择 符 的 使 用 示例 可 参照 css7.html。 
css7.html: 


css7.html 的 显示 结果 如 图 7-6 所 示 。 


7-6 css7.html 的 显示 结果 


在 实际 开发 中 ， 要 尽量 避免 使 用 id 选择 符 ， 因 为 id 选择 符 要 占用 元 素 的 id 属性 ， 而 
id 属性 一 般 还 有 其 他 的 用 途 ， 特 别 是 使 用 JavaScript 脚本 进行 验证 时 ， 需 要 使 用 id 属性 来 
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唯一 地 标识 标签 对 象 。 
7.5.4 ”类 选择 符 
如 果 要 对 页 面 中 的 元 素 定义 不 同 的 格式 ， 仅 使 用 类 型 选择 符 是 不 够 的 ， 还 需要 类 选 


择 符 (E.class)。 类 选择 符 在 选择 符 之 前 需要 加 一 个 实心 的 圆 点， 表示 选择 符 的 类 型 是 类 选 
择 符 。 其 格式 为 : 


selector.classname{ 


propertyl: value; 


property2: value; 


} 
例如 : 


p.left{ 
text-align: left 
} 
p.center 
{ 
text-align: center 
} 


要 使 用 类 选择 符 定义 的 样式 ， 需 要 在 标签 中 利用 class 属性 指定 ， 例 如 : 

<p class="left"> 这 是 居 左 显示 的 段落 </p> 

<p class="center"> 这 是 居中 显示 的 段落 </p> 

使 用 类 选择 符 时 ， 也 可 以 不 指定 具体 的 选择 符 ， 直 接 使 用 “.” 加 类 名 ， 或 者 在 “.” 
前 添加 “*”。 这 样 可 以 使 不 同 的 选择 符 共享 样式 ， 提 高 代码 的 重用 性 。 如 果 要 对 页 面 中 的 
多 种 元 素 分 类 定义 不 同 的 格式 ， 可 以 使 用 这 种 方式 。 其 语法 为 : 

.Cclassname{ 


propertyl: value; 


propertyN: value; 
} 


类 选择 符 的 使 用 示例 请 参照 css8.html。 
css8.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 类 选择 符 </title> 
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<style type="text/css"> 
-One { 
color: red; 
font-size: 12pt; 
} 
-七 WO { 
color: green; 
font-size: 14pt; 
} 
.three { 
color: #800080; 
font-size: 16pt; 
} 
</style> 
</head> 
<body> 


<hl class="one"> 这 是 引用 one 类 样式 的 标题 1</h1> 
<p class="one"> 这 是 引用 one 类 样式 的 段落 </p> 
<p class="two"> 这 是 引用 two 类 样式 的 段落 </p> 
<p class="three"> 这 是 引用 three 类 样式 的 段落 </p> 


</body> 
</html> 


css8.html 的 显示 结果 如 图 7-7 所 示 。 


C 合 |©127.0.0.1:8020.. 人 女 
这 是 引用 one 类 样式 的 标题 1 


这 是 引用 one 类 样式 的 段落 
这 是 引用 two 类 样式 的 段落 


这 是 引用 three 类 样式 的 段落 


图 7-7 css8.html 的 显示 结果 


C6 CSS3 关系 选择 符 


CSS3 的 关系 选择 符 包 括 包含 选择 符 、 子 选择 符 、 相 邻 选择 符 、 兄 弟 选 择 符 等 。 
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MV 


<!DOCTYPE html> 
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7.6.1 包含 选择 符 


包含 选择 符 (EF) 也 称 为 后 代 选 择 符 ， 是 使 用 空格 分 隔 各 个 选择 符 ， 选 择 符 之 间 必 须 
是 包含 关系 时 ， 才 能 使 用 样式 。 例 如 : 


p em{color: green} 


则 只 有 在 p 元 素 内 部 的 em 元 素 才 会 应 用 颜色 为 绿色 的 样式 ,其 他 的 em 元 素 不 使 用 此 样式 。 
在 包含 选择 符 中 ， 规 则 左边 的 选择 符 一 端 包 括 两 个 或 多 个 使 用 空格 分 隔 的 选择 符 。 选 择 符 
之 间 的 空格 可 以 理解 成 一 种 运算 符 ， 解 释 为 “在 …… 找到 ……: es 作为 :ss 的 一 
部 分 ”。 例 如 ，p em{color: green} 可 以 理解 成 p 元 素 后 代 的 任何 em 元 素 。 包 含 选择 符 的 使 
用 示例 可 参照 css9.html。 

css9.html: 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 包 含 选择 符 </title> 
<style type="text/css"> 
p em { 
color: green; 
font-size: 30pt; 
} 
</style> 
</head> 
<body> 
<p><em>em 是 hl 的 子 元 素 </em></p> 
<p><strong><em>em 是 hl 的 后 代 ， 但 不 是 hl 的 子 元 素 </em></strong></p> 


</html> 


css9.html 的 显示 结果 如 图 7-8 所 示 。 


Es eileen 
/ 口 包 会 迁 择 符 x VE 
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7-8 ”css9.html 的 显示 结果 
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7.6.2 ” 子 选 择 符 


子 选择 符 (E>F) 只 能 选择 某 元 素 的 子 元 素 ， 其 中 卫 为 父 元 素 , 为 子 元 素 , 其 中 E>F 
表示 选择 卫 元 素 下 的 所 有 子 元 素 E。 子 选择 符 和 包含 选择 符 不 同 ， 包 含 选择 符 中 FE 是 王 的 
后 代 元 素 , 也 包含 子 元 素 ; 而 子 选 择 符 的 F 仅仅 是 王 的 子 元 素 , 其 他 后 代 元 素 不 包含 在 内 。 
例如 ，css10.html。 

css10.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 子 选择 符 </title> 
<style type="text/css"> 
p>em { 
color: green; 
font-size: 30pt; 
} 
</style> 
</head> 
<body> 
<p><em>em 是 hl 的 子 元 素 </em></p> 
<p><strong><em>em 是 hl 的 后 代 ， 但 不 是 hl 的 子 元 素 </em></strong></p> 
</html> 


css10.html 的 显示 结果 如 图 7-9 所 示 。 
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7-9 ”css10.html 的 显示 结果 


7.6.3” 相 邻 选择 符 


相 邻 选择 符 (CE+F) 指 的 是 选择 有 相同 父 元 素 的 两 个 相 邻 元 素 的 后 一 个 元 素 。 例 如 : 
8 二 要 

margin-top: 50px; 
} 
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表示 的 是 选择 紧 跟 在 hl 元 素 后 出 现 的 p 元素 ， 注 意 ， 并 不 是 同时 选择 hl 元 素 和 op 元 素 ， 


而 是 只 选择 hl 元 素 后 面 紧 跟 的 p 元 素 。 如 果 p 元 素 不 与 hl 元 素 相 邻 ， 则 不 选择 。 例 如 ， 
css11.html。 


css11.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 相 邻 选择 符 </title> 
<style type="text/css"> 
hl+p { 
color: red; 
font-size: 26pt; 
} 
</style> 
</head> 
<body> 
<h1> 这 是 一 级 标题 </h1> 
<p> 这 是 紧 跟 一 级 标题 的 段落 </p> 
<p> 这 不 是 紧 跟 一 级 标题 的 段落 </p> 
</body> 
</html> 


cssll.html 的 显示 结果 如 图 7-10 所 示 。 


[lel 
中 相信 远近 生 x 
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这 不 是 紧 跟 一 级 标题 的 段落 


图 7-10 ”css11.html 的 显示 结果 
7.6.4 兄弟 选择 符 


兄弟 选择 符 〈E~F) 指 的 是 选择 有 相同 父 元 素 的 后 面 的 所 有 的 元 素 。 例 如 : 
hl ~ Pt 

margin-top: 50px; 
} 
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表示 选择 hl 元 素 后 面 所 有 的 p 元 素 ， 不 论 p 元 素 和 hl 元 素 是 否 相 邻 。 例 如 ，css12.html。 
css12.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 兄 弟 选择 符 </title> 
<style type="text/css"> 
hl~p { 
color: red; 
font-size: 16pt7 
' 
</style> 
</head> 
<body> 
<h1> 这 是 一 级 标题 </h1> 
<p> 一 级 标题 后 的 第 一 个 段落 </p> 
<p> 一 级 标题 后 的 第 二 个 段落 </p> 
<p> 一 级 标题 后 的 第 三 个 段落 </p> 
</body> 
</html> 


css12.html 的 显示 结果 如 图 7-11 所 示 。 
ea 
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畔 


7-11 css12.html 的 显示 结果 


C7 CSS3 属性 选择 符 


CSS3 的 属性 选择 符 包括 : 

。 E[attj 一 一 选择 具有 att 属性 的 EE 元素 。 

。 E[att="val"] 一 一 选择 具有 att 属性 并 且 值 等 于 val 的 EE 元 素 。 

。 E[att~="val"] 一 一 选择 具有 att 属性 且 属 性 值 为 使 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 
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等 于 val 的 EE 元 素 (如果 只 有 一 个 值 且 该 值 等 于 val， 则 也 属于 此 情况 )。 
E[att^="val"] 一 一 选择 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 EE 元 素 。 
E[att$="val"] 一 一 选择 具有 att 属性 且 属 性 值 为 以 val 结尾 的 字符 串 的 卫 元 素 。 
E[att*="val"] 一 一 选择 具有 att 属性 且 属 性 值 为 包含 val 的 字符 串 的 EE 元 素 。 
E[attl="val"] 一 一 选择 具有 att 属性 且 属 性 值 为 以 val 开头 并 用 连接 符 “-” 分 隔 的 字 
符 串 的 EE 元 素 ， 如 果 属性 值 仅 为 val， 则 也 属于 此 种 情况 。 

属性 选择 符 的 使 用 示例 可 参考 css13.html。 

css13.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 属 性 选择 符 E[att^="val"]</title> 
<style type="text/css"> 
li[class^="a"] { 
color:orangered; 
font-size:20pt; 
} 
</style> 
</head> 
<body> 
<ul> 
<1i class="ab"> 苹 果 </1i> 
<1i class="bc"> 香 柳 </1i> 
<1i class="ac"> 桔 子 </1i> 
<1i class="bd"> 菠 葛 </1i> 
<1i class="aqd"> 机 桃 </1i> 
</ul> 
</body> 
</html> 


css13.html 的 显示 结果 如 图 7-12 所 示 。 
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图 7-12 ”css13.html 的 显示 结果 
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.8、Css3 伪 类 选择 符 


伪 类 是 一 种 特殊 的 类 选择 符 ， 是 能 够 被 支持 CSS 的 浏览 器 自动 识别 的 特殊 的 选择 符 。 
CSS 中 的 伪 类 的 最 大 作用 就 是 为 不 同 状态 的 超级 链接 定义 不 同 的 样式 效果 。 
伪 类 的 语法 是 在 原 有 的 选择 符 后 加 一 个 伪 类 ， 例 如 : 
selector: pseudo-classt{ 
propertyl: value; 


property2: value; 


} 

伪 类 是 在 CSS 中 已 经 定义 好 的 ， 不 能 像 类 选择 符 一 样 使 用 别 的 名 字 ， 可 以 解释 为 对 象 
在 某 个 特殊 状态 下 的 样式 。 常 用 的 伪 类 有 : 

。 :active 一 一 将 样式 添加 到 被 激活 的 元 素 。 

。 :focus 一 一 将 样式 添加 到 被 选中 的 元 素 。 

。 :hover 一 一 当 鼠 标 悬 浮 在 元 素 上 方 时 ， 向 元 素 添 加 样式 。 

。 :link 一 一 将 样式 添加 到 未 被 访问 的 元 素 。 

。 :Visited 一 一 将 样式 添加 到 已 被 访问 过 的 元 素 。 

。 :first-child 一 一 将 样式 添加 到 元 素 的 第 一 个 子 元 素 。 

。 :lang 一 一 设置 元 素 使 用 特殊 语言 的 内 容 的 样式 。 

伪 类 的 使 用 示例 可 参照 css14.html。 

css14.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 伪 类 </title> 
<style type="text/css"> 
a:link { 
font-size: 14pt; 
text-decoration: underline; 
color:” red 
} 
a:visited { 
font-size: 12pt; 
text-decoration: none; 
color: green 
} 
a:hover { 
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font-size: 16pt; 
text-decoration: none; 
color: #FFCCOO 
} 
a:active { 
font-size: 18pt7 
text-decoration: underline; 
color: blue 
} 
</style> 
</head> 
<body> 
<a href="css13.html"> 超 级 链接 1</a><br /><br /> 
<a href="css13.html"> 超 级 链接 2</a><br /><br /> 
<a href="css13.html"> 超 级 链接 3</a><br /><br /> 
<a href="css13.html"> 超 级 链接 4</a><br /> 
</body> 
</html> 


css14.html 的 显示 结果 如 图 7-13 所 示 。 
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超级 链接 1 和 超级 链接 4 是 还 没有 访问 过 的 状态 ， 超 级 链接 2 和 超级 链接 3 是 已 访问 
过 的 状态 ， 当 把 鼠标 悬 停 在 某 个 超级 链接 上 时 样式 会 发 生 改变 。 将 a 元 素 与 伪 类 选择 符 结 
合 使 用 ， 可 以 在 同一 个 页 面 上 做 出 多 组 不 同 的 超级 链接 的 效果 。 但 是 使 用 :link 伪 类 时 要 保 
证 a 元 素 的 link 属性 是 有 效 的 ， 和 否则 将 无 法 正常 显示 未 访问 过 的 状态 样式 。 

在 CSS3 中 新 增 了 许多 伪 类 ， 包 括 : 

。 p:first-of-type 一 一 选择 属于 其 父 元 素 的 首 个 p 元 素 的 每 个 p 元 素 。 

。 p:last-of-type 一 一 选择 属于 其 父 元 素 的 最 后 p 元 素 的 每 个 p 元 素 。 

® p:only-of-type 选择 属于 其 父 元 素 唯一 的 p 元 素 的 每 个 p 元 素 。 

。 p:only-child 一 一 选择 属于 其 父 元 素 唯一 的 子 元 素 的 每 个 p 元 素 。 

。 p:nth-child(n) 一 一 选择 属于 其 父 元 素 的 第 n 个 子 元 素 的 每 个 p 元 素 。 
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p:nth-last-child(n) 一 一 选择 属于 其 父 元 素 的 倒数 第 n 个 子 元 素 的 每 个 p 元 素 。 
p:nth-of-type(n) 一 一 选择 属于 其 父 元 素 第 n 个 p 元 素 的 每 个 p 元素 。 
p:nth-last-of-type(n) 一 一 选择 属于 其 父 元 素 倒 数 第 n 个 p 元 素 的 每 个 p 元 素 。 


。 p:last-child 一 一 选择 属于 其 父 元 素 最 后 一 个 子 元 素 的 每 个 p 元 素 。 
。 p:empty 一 一 选择 没有 子 元 素 的 每 个 p 元 素 〈 包 括 文本 节点 )。 

。 pi:target 一 一 选择 当前 活动 的 p 元 素 。 

。 :not(p) 一 一 选择 非 p 元 素 的 每 个 元 素 。 

。 :enabled 一 一 控制 表单 控件 的 可 用 状态 。 

。 :disabled 一 一 控制 表单 控件 的 禁用 状态 。 

。 :checked 一 一 单 选 框 或 复 选 框 被 选中 。 


Cs CSS 伪 元 素 选择 符 


与 伪 类 相似 ，CSS 中 也 定义 了 一 些 伪 元 素 用 来 设置 一 些 特 殊 的 文字 格式 。 伪 元 素 通过 
对 插入 到 文档 中 的 虚构 元 素 进行 触发 从 而 实现 特定 的 样式 。 伪 元 素 主要 包括 : 

。 ::after 一 一 用 来 和 content 属性 一 起 使 用 ， 设 置 在 元 素 后 〈 依 据 元 素 树 的 轴 辑 结构 ) 
发 生 的 内 容 。 

。 ::before 一 一 用 来 和 content 属性 一 起 使 用 ， 设 置 在 元 素 前 (依据 元 素 树 的 逻辑 结构 ) 
发 生 的 内 容 。 

。 ::first-letter 一 一 设置 元 素 内 的 第 一 个 字符 的 样式 。 此 伪 元 素 适用 于 块 元素 ， 例 如 p 
和 div。 块 元 素 生 成 一 个 元 素 框 ， 它 会 填充 其 父 级 元 素 的 内 容 ， 即 在 元 素 框 之 前 和 
之 后 都 存在 分 隔 符 。 内 联 元 素 〈 也 称 为 行内 元 素 ) 要 使 用 该 属性 ， 必 须 先 设 定 元 素 
的 height 或 者 width 属性 ， 或 者 设 定 position 属性 为 absolute， 或 者 设 定 display 属 
性 为 block (显示 为 块 )。 

。 ::first-line 一 一 设置 元 素 内 的 第 一 行 字 符 的 样式 。 此 伪 元 素 适 用 于 块 元 素 。 内 联 元 素 
要 使 用 该 属性 ， 设 置 方法 与 ::first-letter 伪 元 素 相同 。 

伪 元 素 的 使 用 示例 如 css15.html。 

css15.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 伪 元 素 的 使 用 </title> 
<style type="text/css"> 
div:first-line { 
font-weight: bold; 


color: red; 


font-size: 14pt; 
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} 
p:first-letter { 
Color: green; 
font-size: 1l8pt; 
1 
</style> 
</head> 
<body> 
<div> 我 是 div 的 第 一 行 <br /> 我 是 div 的 第 二 行 
</div> 
<p> 我 是 段落 p</p> 
</body> 
</html> 


css15.html 的 显示 结果 如 图 7-14 所 示 。 
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我 是 段落 p 


图 7-14 css15.html 的 显示 结果 


CSS3 的 标准 规定 ， 伪 类 使 用 单 冒号 ， 伪 元 素 使 用 双 冒 号 。 但 是 由 于 CSS2 中 伪 类 和 伪 
元 素 都 使 用 单 冒号 ， 所 以 为 了 兼容 性 ， 在 CSS3 中 伪 元 素 使 用 单 冒 号 或 双 冒 号 都 可 以 。 但 
是 低 版 本 的 浏览 器 存在 双 冒 号 的 兼容 问题 。 

CSS3 新 增加 了 ::selection 和 ::placeholder 伪 元 素 。 在 默认 情况 下 , 对 于 浏览 器 中 显示 的 
网 页 的 被 选中 文字 的 显示 是 统一 的 , 例如 在 Windows 操作 系统 下 ， 是 深蓝 色 的 背景 , 白色 
的 文字 ， 如 果 要 修改 这 一 样式 ， 可 以 使 用 CSS3 中 新 增加 了 伪 元 素 ::selection。 例 如 ， 
css16.html。 

css16.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>selection 选择 符 </title> 
<style type="text/css"> 


p::selection{ 
background:yellow; 
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color:red; 
} 
/*Mozilla Firefox*/ 
p::-moz -selection{ 
background:yellow; 
color:red; 
和 
</style> 
</head> 
<body> 
<p> 
独 坐 师 算 里 ， 弹 琴 复 长 哺 。<br /> 
深 林 人 不 知 ， 明 月 来 相 照 。 
</p> 
</body> 


</html> 


当选 中 第 一 行文 字 时 ，css16.html 的 显示 结果 如 图 7-15 所 示 ， 被 选中 的 文字 变 成 了 红 
色 ， 背景 变 成 了 黄色 。 


C 个 @ 1270018020.， 女 


独 坐 幽 笔 里， 弹琴 复 长 啸 。 
深 林 人 不 知 ， 明 月 来 相 照 。 


7-15 css16.html 的 显示 结果 


注意 : IE9+、Opera、Google Chrome 以 及 Safari 中 支持 ::selection 选择 符 . Firefox 支 
持 替代 的 ::-moz-selection。 只 能 向 ::selection 选择 符 应 用 color、background、cursor 以 及 
outline 属性 ， 应 用 其 他 属性 无 效 。 


小 结 


CSS 即 层 合 样式 表 ， 是 设计 网 页 的 布局 和 样式 的 有 效 手段 。 
CSS 的 样式 规则 包括 选择 符 、 属 性 名 以 及 属性 值 。 
。 使 用 样式 表 的 方式 包括 内 嵌 样 式 表 、 内 部 样式 表 、 外 部 样式 表 ， 其 中 ， 外 部 样式 表 


。 各 种 使 用 样式 表 的 优先 级 从 高 到 低 依 次 为 内 嵌 样 式 表 、 内 部 样式 表 、 外 部 样式 表 、 
浏览 器 的 默认 样式 。 


选择 符 指明 样式 应 用 的 对 象 ，CSS3 中 的 选择 符 主要 包括 元 素 选择 符 、 关 系 选择 符 、 
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属性 选择 符 、 伪 类 选择 符 、 伪 元 素 选择 符 。 
。 CSS3 中 还 提供 了 伪 类 选择 符 和 伪 元 素 选 择 符 来 为 特殊 的 对 象 提供 不 同 状态 下 的 样式 。 
。 CSS3 中 新 增加 了 p:first-of-type、p:last-of-type、p:only-of-type、p:only-child 等 伪 类 。 
。 CSS3 中 新 增加 了 ::selection 和 ::placeholder 伪 元 素 。 


题 


By 


1. 下 面 说 法 错误 的 是 ( )。 

A. CSS 样式 表 可 以 将 网 页 的 内 容 和 样式 分 离 

B. CSS 样式 表 可 以 控制 页 面 的 布局 

C. CSS 样式 表 可 以 同时 更 新 许多 网 页 

D. 使 用 CSS 样式 表 不 能 制作 体积 更 小 、 下 载 速度 更 快 的 网 页 
) 不 属于 CSS 的 使 用 方法 。 


到 


外 部 式 
面 ( ) 方式 使 用 CSS 的 优先 级 最 高 。 
内 联 式 
内 顽 式 
外 部 式 
浏览 器 默认 的 样式 
列 关 于 选择 符 说 法 正确 的 是 和 5 
A. 类 选择 符 只 能 应 用 于 某 一 类 HTML 元 素 
B. id 选择 符 可 以 重复 使 用 
C. 类 选择 符 的 优先 级 高 于 标签 选择 符 
D. 标签 选择 符 用 于 设置 HIML 元 素 的 默认 的 样式 
5. 若 要 在 外 部 样式 表 中 使 用 my.css， 以 下 用 法 中 ，( ) 是 正确 的 。 
A. <link hre 伟 "my.css" type="text/css" rel="stylesheet"/> 
B. <link src="my.css" type="text/css" rel="stylesheet"/> 
C. <link href="my.css" type="text/css"/> 
D. <include hef="my.css" type="text/css" rel="stylesheet"/> 
. CSS3 的 样式 规则 包括 哪 几 部 分 ? 常用 的 CSS3 选择 符 包括 哪些 ? 
使 用 CSS 有 哪儿 种 方法 ? 
使 用 <link> 方 式 和 使 用 @import 方式 导入 样式 表 有 何 区 别 ? 
.CSS3 新 增 的 伪 类 有 哪些 ? 


ULD 
二 口 D 只 > 才 口 只 > 才 
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可 以 使 用 丰富 的 样式 规则 来 为 网 页 中 的 元 素 设 计 显 示 样 式 。CSS 样式 属性 大 致 分 为 字 
体 属 性 、 文 本 属性 、 文 本 装饰 属性 、 背 景 属性 、 边 框 属 性 、 定 位 属性 、 布 局 属性 、 列 表 属 
性 、 光 标 属性 等 。 


.1 字体 属性 


在 CSS 中 可 以 通过 字体 属性 来 设置 网 页 中 文字 的 显示 效果 ， 主 要 包括 文字 的 字体 、 字 
号 、 样 式 等 ， 常 用 的 字体 属性 包括 : 
font-style 一 一 字体 样式 ，normal 表示 正常 ，italic 表示 斜体 ，oblique 表示 倾斜 。 
font-variant 一 一 文本 是 否 为 小 型 的 大 写字 母 , normal 表示 正常 ; small-caps 表示 小 型 
的 大 写字 和 母 。 
font-weight 一 一 文本 的 字体 的 粗细 ，normal 表示 正常 ，lighter 表示 细 体 ，bold 表示 
粗 体 ，bolder 表示 特 粗 体 。 
font-size 一 一 文本 的 字号 ，absolute-size 表示 根据 对 象 字号 进行 调节 ; relative-size 表 
示 相 对 于 父 元 素 字号 进行 相对 调节 ; length 表示 用 长 度 值 指定 文字 大 小 ; percentage 
表示 用 百分比 指定 文字 大 小 。 
font-family 一 一 文本 的 字体 ， 当 指定 多 种 字体 时 ， 中 间 用 逗号 分 隔 ; 当 字 体 由 多 个 
单词 组 成 时 ， 使 用 双 引 号 括 起 来 。 
font-stretch 一 一 对 象 中 的 文字 是 否 横向 拉 伸 变形 ， 可 取 normal、ultra-condensed、 
extra-condensed、condensed 等 值 。 
font-size-adjust 一 一 对 象 的 aspect 值 ， 用 以 保持 首选 字体 的 x-height。 

字体 属性 也 可 以 使 用 font 组 合 属性 按照 font-style、font-variant、font-weight、font-size、 
font-family 的 顺序 设 定 。 字 体 属 性 的 使 用 示例 可 参照 css1.html。 

cssl.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
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<title> 字 体 属性 </title> 
<style type="text/css"> 
pi 
font-family: 楷体 ; 
font-size: 18pt7 
font-style: italic; 
font-weight: bold; 
color: blue; 
} 
Lr 
font-family: 楷体 ; 
font-size: 20pt; 
color: red; 
</style> 
</head> 
<body> 
<h1> 黄 稚 楼 送 孟 浩然 之 广陵 </h1> 
<p> 
故人 西 辞 黄 锥 楼 <br /> 
烟花 三 月 下 扬州 <br /> 
扳 帆 远 影 外 空 尽 <br /> 
惟 见长 江天 际 流 <br /> 
</p> 
</body> 
</html> 


cssl.html 的 显示 结果 如 图 8-1 所 示 。 
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图 8-1 css1.html 的 显示 结果 
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862 文本 和 文本 装饰 属性 


1. 文本 属性 
文本 属性 主要 用 来 设置 块 元 素 内 的 文字 的 显示 样式 , 主要 包括 缩 进 、 对 齐 方式 、 行 高 、 
文字 间隔 、 文 本 大 小 写 等 。 文 本 属性 包括 : 
。 text-transform 一 一 文本 的 大 小 写 。 
。 white-space 一 一 空格 的 处 理 方式 。 
。 tab-size 一 一 制 表 符 的 长 度 。 
。 overflow-wrap 一 一 当 内 容 超过 指定 容器 的 边界 时 是 否 断 行 。 
。 word-break 一 一 对 象 内 文本 的 字 内 换行 行为 ， 默 认为 normal， 人 允许 字 内 换行 。 
。 text-align 一 一 内 容 的 水 平 对 齐 方 式 。 
。 text-align-last 一 一 块 内 最 后 一 行 或 者 被 强制 打 断 的 行 的 对 齐 方式 。 
调整 文本 使 用 的 对 齐 方 式 。 
。 word-spacing 一 一 单词 之 间 的 最 小 、 最 大 和 最 佳 间距 。 
。 letter-spacing 一 一 字符 之 间 的 最 小 、 最 大 和 最 佳 间 距 。 
。 text-indent 一 一 文本 的 缩 进 。 
evertical-align 一 一 内 容 的 垂直 对 齐 方式 。 
。 line-height 一 一 对 象 的 行 高 。 


e text-justify 


2. 文本 装饰 属性 
文本 装饰 属性 包括 : 
。 text-decoration-line 一 一 文本 装饰 线条 的 位 置 。 


。 text-decoration-color 一 一 文本 装饰 线条 的 颜色 。 

。 text-decoration-style 一 一 文本 装饰 线条 的 形状 。 

。 text-decoration-skip 一 一 文本 装饰 线条 略 过 的 部 分 。 
。 text-underline-position 一 一 文本 下 夯 线 的 位 置 。 

。 text-shadow 一 一 文本 的 阴影 及 模糊 效果 。 

。 text-decoration 一 一 复合 属性 。 

文本 和 文本 装饰 属性 的 应 用 示例 可 参照 css2.html。 
css2.html: 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
<title> 文 本 和 文本 装饰 </title> 
<style type="text/css"> 
div { 
text-indent: 30px; 
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text-align: left; 
line-height: 25px; 
letter-spacing: 5px; 
text-decoration: underline; 
color: orangered; 
} 
</style> 
</head> 
<body> 
<div> 
天 将 降 大 任 于 斯 人 也 ， 必 先 苦 其 心志 , 劳 其 筋骨 , 饿 其 体 肤 ， 空 乏 其 身 , 行 拂 乱 其 所 为 ， 
所 以 动心 忍 性 ， 曾 益 其 所 不 能 。 
</div> 
</body> 
</html> 


css2.html 的 显示 结果 如 图 8-2 所 示 。 
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图 8-2 ”css2.html 的 显示 结果 


CSS 中 的 背景 属性 可 以 用 来 设置 body、table 等 元 素 的 背景 ， 主 要 包括 背景 色 、 背 景 图 
片 、 背 景 图 片 的 平 铺 方式 等 。 背 景 属性 包括 : 
。 background-color 一 一 背景 颜色 。 


background-image 一 一 背景 图 像 。 

background-repeat 一 一 背景 图 像 如 何 铺 排 填充 。 
background-attachment 一 一 背景 图 像 随 着 对 象 内 容 深 动 或 者 固定 。 
background-position 一 一 背景 图 像 位 置 。 

background-origin 一 一 背景 图 像 显 示 的 原点 。 

9 景 向 外 裁剪 的 区 域 。 


background-clip 
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。 background-size 一 一 背景 图 像 的 尺寸 大 小 。 
。 background 一 一 复合 属性 。 

了 景 属性 的 应 用 示例 可 参照 css3.html。 
css3.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 背 景 属性 </tit1e> 
<style type="text/css"> 
body { 
color: yellow; 
font-family: 黑体 ; 
font-size: 1l12pt; 
background-image: url (img/backl .jpg); 
background-repeat: repeat-y; 
background-attachment: fixed; 
} 
</style> 
</head> 
<body> 
范仲淹 : 苏 幕 谈 <br /> 眉 云天 ， 黄 叶 地 ， 秋 色 连 波 ， 波 上 寒 烟 泰 。 山 映 斜 阳 天 接 水 ， 芳 草 
无 情 ， 更 在 斜阳 外 。 
<br /> 同乡 瑰 ， 追 旅 思 。 夜 夜 除非 ， 好 梦 留 人 睡 。 明 月 楼 高 休 独 倚 ， 酒 入 悉 肠 ， 化 作 相思 泪 。 
<br /> 
<br /> 范仲淹 : 渔家 做 
<br /> 塞 下 秋 来 风景 异 。 衔 阳 雁 去 无 留意 。 四 面 边 声 连 角 起 。 千 贬 里 。 长 烟 落 日 孤城 闭 。 
<br /> 浊 酒 一 杯 家 万 里 。 燕 然 未 勒 归 无 计 。 羌 管 悠悠 霜 满 地 。 人 不 呈 。 将 军 白 发 征 夫 泪 。 
<br /> 
</body> 
</html> 


css3.html 的 显示 结果 如 图 8-3 所 示 。 
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图 8-3 css3.html 的 显示 结果 
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当 拖 动 垂直 滚动 条 时 ， 背 景 图 片 固定 ， 不 随 文字 滚动 。 


利用 CSS 的 边框 属性 可 以 设置 对 象 边 框 的 颜色 、 样 式 以 及 宽度 等 。CSS3 中 还 增加 了 


角 边 框 、 阴 影 、 边 框 填 充 图 像 等 新 的 属性 。 使 用 边框 属性 之 前 ， 必 须 先 设 定 对 象 的 高 度 


及 宽度 ， 或 者 将 对 象 的 position 属性 设置 成 absolute。 


1. 边框 颜色 

边框 颜色 的 属性 包括 : 

。 border-top-color 一 一 上 边框 的 颜色 。 

。 border-right-color 一 一 右边 框 的 颜色 。 

。 border-bottom-color 一 一 下 边框 的 颜色 。 

。 border-left-color 一 一 左边 框 的 颜色 。 

。 border-color 一 一 复合 属性 ， 同 时 设置 4 个 边框 的 颜色 。 

当 使 用 border-color 属性 时 ， 对 边框 颜色 赋值 时 可 以 使 用 以 下 几 种 方式 : 

。 4 个 参数 一 一 按 上 方 、 右 方 、 下 方 、 左 方 的 顺序 赋值 ， 例 如 ，border-color: red green 
blue black:; 

。 1 个 参数 一 一 颜色 作用 于 4 条 边框 ， 例 如 ，border-color: red; 

。 2 个 参数 一 一 按照 上 下 ， 左 右 的 顺序 赋值 ; 例如 ，border-color: red green 表示 上 下 边 
框 为 红色 ， 左 右边 框 为 绿色 ; 

。 3 个 参数 一 一 按照 上 ， 左 右 ， 下 的 顺序 赋值 ， 例 如 ，border-color: red green blue 表示 

上 边框 为 红色 ， 左 右边 框 为 绿色 ， 下 边框 为 蓝 色 。 

2. 边框 样式 

定义 边框 样式 的 属性 包括 : 

。 border-top-style 一 一 上 边框 的 样式 。 

。 border-right-style 一 一 右边 框 的 样式 。 

。 border-bottom-style 一 一 下 边框 的 样式 。 

。 border-left-style 一 一 左边 框 的 样式 。 

。 border-style 一 一 复合 属性 ， 同 时 设置 4 个 边框 的 样式 。 

当 使 用 border-style 属性 设置 边框 样式 时 , 参数 的 个 数 及 赋值 方式 与 border-color 类 似 ， 


边框 样式 的 可 取 值 及 其 说 明 如 表 8-1 所 示 。 


表 8-1 边框 样式 的 取 值 


边框 样式 说 明 

none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
hidden 隐藏 边框 

dotted 点 线 边 框 

dashed 虚线 边框 


solid 实 线 边 框 
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续 表 
边框 样式 说 明 
double 双 线 边框 
groove 3D 四 槽 边框 
Tidge 萎 形 边框 
inset 3D 内 恢 边 框 
outset 3D 凸 边框 
3. 边框 宽度 


定义 边框 宽度 的 属性 包括 : 

。 border-top-width 一 一 上 边框 的 宽度 。 

。 border-right-width 一 一 右边 框 的 宽度 。 

。 border-bottom-width 一 一 下 边框 的 宽度 。 

。 border-left-width 一 一 左边 框 的 宽度 。 

。 border-width 一 一 复合 属性 ， 同 时 设置 4 个 边框 的 宽度 。 


使 用 border-width 属性 时 ， 宽 度 的 取 值 可 以 使 用 关键 字 或 自 定义 的 数值 ， 参 数 的 个 数 
及 赋值 方式 与 border-color 类 似 。 边 框 宽度 可 取 值 为 medium、thin、thick、 长 度 值 。medium 
指 默认 宽度 ;thin 指 小 于 默认 宽度 ;thick 指 大 于 默认 宽度 。 边 框 属性 的 使 用 可 参照 css4.html。 


css4.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 边 框 属性 </title> 
<style type="text/css"> 
div.bl { 
border: 2px dashed #FF9600; 
position: absolute; 
background-color: #33CCFF; 
width: 250px; 
height: 100px; 
display: inline; 


div.b2 { 
border: 4px double red; 
position: relative; 
top: 1l10px; 
left: lO0px; 
width: 100px; 
height: 100px; 
background-color: #FFCCOO0; 
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</style> 
</head> 
<body> 
<div class="b1l"> 
<div class="b2"> 春 晓 <br /> 
春 眠 不 觉 晓 <br /> 
处 处 闻 啼 鸟 <br /> 
夜来 风雨 声 <br /> 
花 落 知 多 少 </div> 
</div> 
</body> 
</html> 


css4.html 的 显示 结果 如 图 8-4 所 示 。 


8-4 ”css4.html 的 显示 结果 


4. 圆 角 边框 

圆 角 边框 是 CSS3 新 增 的 属性 ， 设 置 圆 角 边框 的 属性 包括 : 

。 border-top-left-radius 一 一 对 象 的 边框 左上 角 圆 角 半 径 。 

。 border-top-right-radius 一 一 对 象 的 边框 右上 角 圆 角 半径 。 

。 border-bottom-right-radius 一 一 对 象 的 边框 右 下 角 贺 角 半径 。 
对 象 的 边框 左下 角 圆 角 半 径 。 


® border-bottom-left-radius 

e border-radius 复合 属性 。 

当 单 独 设置 对 象 的 一 个 角 的 圆 角 边框 时 ， 属 性 值 为 两 个 参数 ， 以 空格 分 隔 。 第 一 个 参 
数 表 示 圆 角 水 平 半径 ， 第 二 个 参数 表示 圆 角 垂直 半径 ， 如 果 第 二 个 参数 省 略 ， 则 默认 等 于 
第 一 个 参数 。 

当 使 用 border-radius 复合 属性 时 ， 属 性 值 可 分 为 两 部 分 ， 以 “/” 分 隔 。 第 一 部 分 表示 
水 平 半 径 ， 第 二 部 分 表示 垂直 半径 。 如 果 第 二 部 分 省 略 ， 则 默认 为 与 第 一 部 分 的 参数 值 相 
同 。 每 部 分 允许 设置 1 一 4 个 参数 值 ， 以 水 平 半径 为 例 : 

。 如 果 提 供 全 部 4 个 参数 值 ， 将 按 上 左 、 上 右 、 下 右 、 下 左 的 顺序 作用 于 4 个 角 。 

。 如 果 只 提供 一 个 参数 值 ， 将 作用 于 全 部 4 个 角 。 
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。 如 果 提 供 两 个 参数 值 ， 第 一 个 用 于 上 左 、 下 右 两 个 角 ， 第 二 个 用 于 上 右 、 下 左 两 
个 角 。 

。 如 果 提 供 3 个 ， 第 一 个 用 于 上 左 ， 第 二 个 用 于 上 右 、 下 左 ， 第 三 个 用 于 下 右 。 

垂直 半径 的 设置 与 水 平 半径 类 似 。 设 置 边框 的 一 个 圆 角 的 示例 可 参考 css5.html。 

css5.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 一 个 圆 角 边框 </title> 
<style type="text/css"> 
div { 
height: 60px; 
width: 220px; 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
border: 5px solid green; 
border-top-right-radius: 30px; 
font-size: 16pt; 
} 
</style> 
</head> 
<body> 
<div> 我 有 一 个 圆 角 </div> 
</body> 
</html> 


css5.html 的 显示 结果 如 图 8-5 所 示 。 


到 加 LEE 
一 人 加 名 w 框 x 


GC 合 |© 127.0.0.1:802... 从 


我 有 一 个 圆 角 
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设置 边框 的 两 个 圆 角 的 示例 可 参考 css6.html。 
css6.html: 


(人 2 
SA 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 两 个 圆 角 边框 </title> 
<style type="text/css"> 
div { 
height: 60px; 
width: 220px; 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
border: 5px solid green; 
border-top-right-radius: 30px; 
border-bottom-left-radius: 30px; 
font-size: 16pt; 
} 


</style> 
</head> 
<body> 
<div> 我 有 两 个 圆 角 </div> 
</body> 
</html> 


css6.html 的 显示 结果 如 图 8-6 所 示 。 


2 ElEE 
口 两 个 国 角 边 和 x 


GC OO |© 127.0.0.1:802... 


于 我 而 人 向 | 
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5. 边框 阴影 
边框 阴影 也 是 CSS3 新 增 的 样式 属性 ,使 用 box-shadow 属性 设置 。box-shadow 属性 的 
使 用 方法 如 下 : 


box-shadow: h-shadow v-shadow blur spread color inset; 
其 中 ， 

。 h-shadow: 必需 ,水平 阴 影 的 位 置 ， 允 许 负 值 。 
V-shadow: 必需 ,垂直 阴影 的 位 置 ， 允 许 负 值 。 
blur: 可 选 ， 模 糊 距离 。 


。 spread: 可 选 ， 阴 影 尺 寸 。 
。 color: 可 选 ， 阴 影 的 颜色 。 
。 inset: 可 选 ， 将 外 部 阴影 改 为 内 部 阴影 。 


边框 阴影 的 使 有 


css7.html: 


可 参照 css7.html。 
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<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 边 框 阴影 </title> 
<style> 
= 


} 


-ex 


-ex 


.ex 


} 
.ex 


} 


margin-top: 20px; 
list-style: none; 


width: 200px; 
padding: 10px; 


background: #FFCCO00; 
font-size: 14pt; 


.Outset { 
box-shadow: 6px 


.Outset-blur { 
box-shadow: 6px 


.Outset-ext { 
box-shadow: 6px 


.inset { 
box-shadow: 2px 


</style> 


</head> 
<body> 


<ul class="ex"> 


< 
<1 
RE 
LE 
</ul> 
</body> 
</html> 


class="outset"> 外 阴影 </1i> 
class="outset-blur"> 外 阴影 模糊 </1i> 
class="outset-ext"> 外 阴影 模糊 外 延 </1i> 
class="inset"> 内 阴影 </1i> 


6PX 


6px 


6px 


css7.html 的 显示 结果 如 图 8-7 所 示 。 


rgba(99, 0, 255, 0.7); 


6px rgba(99; ‘0 2557 0。712 


6px 6px rgba(99, 0, 255, 0.7); 


6€px lpx rgba(99, 0, 255, 0.7) inset; 
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r 


外 阴影 模糊 | 
外 阴影 模糊 外 延 | 
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6. 图 像 边框 

CSS3 中 支持 绘制 图 像 边框 ， 可 使 用 以 下 属性 设置 : 

。 border-image-source 一 一 用 于 绘制 边框 的 图 像 的 位 置 。 

。 border-image-slice 一 一 图 像 边界 向 内 偏 移 。 

。 border-image-width 一 一 图 像 边界 的 宽度 。 

。 border-image-outset 一 一 指定 在 边框 外 部 绘制 的 量 。 

。 border-image-repeat 一 一 用 于 设置 图 像 边界 的 平 铺 方式 。 
。 border-image 一 一 复合 属性 。 

border-image 属性 的 使 用 方法 为 : 


border-image: source slice width outset repeat; 


其 中 ，border-image 属性 的 值 使 用 空格 隔 开 ， 分 别 对 应 于 图 像 边 框 的 非 复 合 属性 。 绘 制 边 
框图 像 的 示例 可 参考 css8.html。 
css8.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 绘 制图 像 边框 </title> 
<style type="text/css"> 
div { 
width: 300px; 
height: 80px; 
border: 5px solid; 
display: table-cell; 
vertical-align: middle; 


text-align: center; 


font-size: 30pt; 
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color: #FF4500; 
border-image-source: url(img/back2.jpg); 
border-image-slice: 5% 5%; 
border-image-width: 10px 10px; 
border-image-outset: 5px 5px; 
border-image-repeat: repeat; 
} 
</style> 
</head> 
<body> 
<div> 绘 制图 像 边 框 </div> 
</body> 
</html> 


css8.html 的 显示 结果 如 图 8-8 所 示 。 


7 口 给 制图 从 边框 
C 人 之 © 127.0.0.1:8020/ch0... 会 


| 人 给 制图 像 边 bi 本 | 
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边框 的 显示 样式 也 可 以 使 用 border 复合 属性 按照 宽度 、 样 式 、 颜 色 的 顺序 定义 。 


8.5， 定 位 属性 


利用 CSS 定位 属性 可 以 定义 元 素 的 定位 方式 和 元 素 上 、 下 、 左 、 右 偏 移 的 位 置 ， 也 可 
以 定义 元 素 的 又 放 次 序 。CSS3 的 定位 属性 包括 : 

。 position 一 一 对 象 的 定位 方式 。static 表示 无 特殊 定位 ，relative 表示 相对 定位 ， 对 象 
不 可 层 苹 ，absolute 表示 绝对 定位 ， 对 象 可 以 层 蔷 。 

。 z-index 一 一 对 象 的 层 靶 顺序 。auto 表示 遵循 父 元 素 的 定位 ; 自 定 义 的 数值 : 无 单位 
的 整数 值 ， 可 为 负数 ， 值 较 大 的 对 象 会 覆盖 值 较 小 的 对 象 。 如 果 两 个 对 象 具有 相同 
的 z-index 值 ， 那 么 将 根据 在 文档 中 声明 的 顺序 来 决定 覆盖 顺序 。 

。 top 一 一 对 象 参 照相 对 物 顶 边界 向 下 偏 移 的 位 置 .auto 表示 无 特殊 定位 ; 自 定义 数值 : 
百分比 或 长 度 , 只 有 position 取 值 为 absolute 或 relative 时 , 此 属性 值 才 有 效 。right、 
bottom、left 属性 的 取 值 与 之 类 似 。 

。 Tight 一 一 对 象 参照 相对 物 右 边界 向 左 偏 移 的 位 置 。 
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e bottom 对 象 参照 相对 物 下 边界 向 上 偏 移 的 位 置 。 

。 left 一 一 对 象 参照 相对 物 左 边界 向 右 偏 移 的 位 置 。 

e clip 对 象 的 可 视 区 域 ， 区 域外 的 部 分 是 透明 的 。auto 表示 自动 ， shape 表示 按照 
形状 定义 显示 。 


.6 布局 属性 


在 HTML 中 ， 元 素 的 位 置 是 依次 排列 的 ， 而 在 CSS 中 可 以 利用 布局 属性 来 定义 元 素 
的 排列 位 置 。 常 用 的 布局 属性 有 display、float、clear、visibility 等 。 

1. display 属性 

display 属性 用 来 确定 页 面 元 素 是 否 显示 以 及 显示 方式 ，display 属性 不 可 继承 。display 
属性 常用 的 值 为 : 

。 block 一 一 定义 元 素 为 块 对 象 ; 

。 inline 一 一 定义 元 素 为 内 联 对 象 ， 即 行内 元 素 ; 

elist-item 一 一 定义 元 素 为 列表 项 目 ; 

。 none 一 一 定义 元 素 为 隐藏 对 象 ， 同 时 元 素 所 占 的 空间 也 被 清除 。 

2. float 属性 

float 属性 用 来 定义 元 素 是 否 浮动 及 浮动 的 方式 。 可 取 的 值 有 : 

。 none 一 一 元 素 不 浮动 ; 

。 left 一 一 元 素 的 浮动 在 左 侧 ; 

。 Tight 一 一 元 素 的 浮动 在 右 侧 。 

3. clear 属性 

clear 属性 用 来 定义 不 允许 有 浮动 对 象 的 边 。 可 取 的 值 有 : 

。 none 一 一 允许 两 边 都 可 以 有 浮动 对 象 ; 


。 both 一 一 不 允许 有 浮动 对 象 ; 

。 left 一 一 不 允许 左边 有 浮动 对 象 ; 
。 right 一 一 不 允许 右边 有 浮动 对 象 。 
4. visibility 属性 


visibility 属性 用 来 确定 元 素 是 否 显示 ， 该 属性 不 可 继承 。 可 取 的 值 有 : 

。 visible 一 一 元 素 可 见 ; 

。 hidden 一 一 元 素 不 可 见 ， 但 元 素 所 占 空间 依然 存在 ; 

。 collapse 一 一 在 表格 元 素 中 使 用 时 , 会 隐藏 表格 中 的 行 和 列 。 在 非 表 格 元 素 中 使 用 时 ， 

元 素 不 可 见 。 

5. overflow 属性 

overflow 为 复合 属性 ， 指 对 象 处 理 溢出 内 容 的 方式 。 

6. overflow-x 属性 

overflow-x 属性 指明 如 果 溢 出 元 素 内 容 区 域 的 话 ， 是 否 对 内 容 的 左右 边缘 进行 裁剪 。 
可 取 的 值 有 : 
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visible 一 一 不 裁剪 内 容 ， 可 能 会 显示 在 内 容 框 之 外 ; 
hidden 一 一 裁剪 内 容 ， 不 提供 滚动 机 制 ; 
scroll 一 一 裁剪 内 容 ， 提 供 滚 动机 制 ; 
auto 一 一 如 果 溢 出 ， 则 应 提供 滚动 机 制 ; 
no-display 一 一 如 果 内 容 不 适合 内 容 框 ， 则 删除 整个 内 容 ; 
如 果 内 容 不 适合 内 容 框 ， 则 隐藏 整个 内 容 。 
7. overflow-y 属性 
overflow-y 属性 指明 如 果 溢 出 元 素 内 容 区 域 ， 是 否 对 内 容 的 上 下 边缘 进行 裁剪 。 其 取 
值 与 overflow-x 属性 类 似 。 
定位 属性 和 布局 属性 的 使 用 示例 可 参照 css9.html。 
css9.html: 


no-content 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 定 位 和 布局 属性 </title> 
<style type="text/css"> 
sl 
position: absolute; 
background-color: #33CCFF; 
width: 250px; 
height: 100px; 
display: inline 


A 
position: relative; 
top: 1l10px; 
left: 10PX7 
width: 100px; 
height: 100px; 
background-color: #FFCCO0O0; 


可 3 全 
position: relative; 
top: -40px; 
left: 120px; 
width: 100px; 
height: 100px; 
background-color: #FF9966 

上 

</style> 
</head> 
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<pbody> 
<div class="d1"> 
<div class="d2"> 春 晓 


</div> 


<br 
<br 
<br 
<br 


/> 春 眠 不 觉 晓 
/> 处 处 闻 啼 鸟 
/> 夜来 风雨 声 
/> 花 落 知 多 少 


<div class="d3"> 静 夜 思 


/> 床 前 明月 光 
/> 疑 是 地 上 和 霜 
/> 举 头 望 明月 
/> 低头 思 故 乡 


</div> 
</div> 
</body> 
</html> 


css9.html 的 显示 结果 如 图 8-9 所 示 。 


图 8-9 ”css9.html 的 显示 结果 


7” 列表 属性 


列表 属性 用 于 设置 列表 项 的 表现 形式 ,常用 的 列表 属性 有 list-style-type、list-style-position、 
list-style-image 以 及 list-style。 

1. list-style-type 属性 

list-style-type 属性 用 来 定义 列表 项 的 显示 符号 ， 本 属性 可 以 继承 ， 常 用 的 值 包 括 : 
实心 圆 ; 


网 ; 


e disc 


ecircle 一 一 空心 
。 square 一 一 实心 方块 ; 


人 
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decimal 阿拉 伯 数 字 ; 
lower-roman: 小 写 罗 马 数 字 ; 
upper-roman 一 一 大 写 罗 马 数字 ; 
lower-alpha 小 写 英 文字 母 ; 
upper-alpha 一 一 大 写 英 文字 母 ; 
none 不 使 用 项 目 符号 。 
list-style-position 属性 


list-style-position 属性 用 来 定义 项 目 符号 在 列表 中 显示 的 位 置 ， 可 以 继承 ， 其 可 取 的 


值 为 : 


3. 


outside 一 一 项 目 符号 放置 在 列表 项 文本 以 外 ; 
inside 一 一 项 目 符号 放置 在 列表 项 文本 以 内 。 
list-style-image 属性 


list-style-image 属性 用 来 定义 代替 列表 项 符号 的 图 像 。 
除了 使 用 以 上 属性 之 外 ， 还 可 以 使 用 list-style 复合 属性 按照 list-style-type 、 
list-style-position、list-style-image 的 顺序 综合 设置 列表 项 的 显示 样式 。 


6.8 光标 属性 


在 CSS 中 ， 可 以 通过 光标 属性 cursor 来 设置 光标 的 显示 图 形 ，cursor 属性 的 可 取 值 如 


表 8-2 所 示 。 
表 8-2 CSS 光标 属性 

光标 属性 说 明 说 明 
crosshair 十 字 准 线 s-resize 各 下 改变 大 小 
Pointer|hand 手 形 e-resize 向 右 改变 大 小 
wait 表 或 沙漏 WwW-resize 向 左 改变 大 小 
help 问号 或 气球 ne-resize 向 上 右 改变 大 小 
no-drop 无 法 释放 nw-resize 向 上 左 改 变 大 小 
text 文字 或 编辑 se-resize 向 下 右 改变 大 小 
move 移动 sw-resize 向 下 左 改变 大 小 
n-resize 向 上 改变 大 小 

小 结 


CSS3 的 属性 包括 文本 属性 、 字 体 属性 、 背 景 属性 、 定 位 属性 、 布 局 属性 、 边 框 属 
性 、 列 表 属性 、 光 标 属性 等 。 
可 以 通过 字体 属性 来 指定 网 页 中 文字 的 显示 效果 ， 主 要 包括 文字 的 字体 、 字 号 、 样 


式 等 。 
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文本 属性 主要 用 来 设置 块 元 素 内 的 文字 的 显示 样式 ， 主 要 包括 缩 进 、 对 齐 方式 、 行 

高 、 文 字 间 隔 、 文 本 大 小 写 等 。 

。 文本 装饰 属性 可 用 来 设置 文本 装饰 线条 的 样式 ， 也 可 用 来 设置 文本 阴影 。 

CSS 中 的 背景 属性 可 以 用 来 设置 body、table 等 元 素 的 背景 ， 主 要 包括 背景 色 、 背 

景 图 片 、 背 景 平 铺 方式 等 。 

。 利用 CSS 边框 属性 可 以 设置 对 象 边框 的 颜色 、 样 式 以 及 宽度 。CSS3 中 还 增加 了 辆 
角 边 框 、 阴 影 、 边 框 填充 图 像 等 新 属性 。 

。 利用 CSS 定位 属性 可 以 定义 元 素 的 定位 方式 和 元 素 上 下 左右 相对 于 参照 物 的 偏 移 
位 置 ， 也 可 以 定义 元 素 的 炙 放 次 序 。 

。 在 CSS 中 可 以 利用 布局 属性 来 定义 元 素 的 排列 位 置 。 


A 


题 


1. 下 列 ( ”) CSS 属性 用 来 设置 对 象 的 背景 颜色 。 
A. bgcolor 
B. background-color 
C. color 
D. 以 上 都 不 对 
2. 下 列 ( ) CSS 属性 用 来 设置 页 面 上 某 个 区 域 的 字体 。 
A. font-face 
B. face 
C. font-family 
D. size 
Ee ) 是 CSS3 的 边框 属性 。 
A. border-image 
B. border-radius 
C. box-shadow 
D. 以 上 都 正确 
4. 以 下 ( ) 代码 可 以 实现 背景 平 铺 效果 。 
A. div{background-image:url(image/bg.gif):} 
B. div{background-image:url(image/bg.gif) repeat-x:} 
C. div{background-image:url(image/bg.gif) repeat-y:} 
D. div{background-image:url(image/bg.gif) no-repeat:} 
5. CSS 样式 background-position:-5px 10px 表示 ( » 
A. 背景 图 片 向 左 偏 移 5px， 向 下 偏 移 10px 
B. 背景 图 片 向 左 偏 移 5px， 向 上 偏 移 10px 
C. 背景 图 片 向 右 偏 移 5px， 向 下 偏 移 10px 
D. 背景 图 片 向 右 偏 移 Spx， 向 上 偏 移 10px 
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6. 可 以 设置 页 面 中 某 个 div 相对 页 面 水 平 居中 的 CSS 样式 是 )。 
A. margin:0 auto 
B. padding:0 auto 
C. text-align:center 
D. vertical-align:middle 
7. 若 要 使 <div> 标 签 出 现 滚动 条 ， 需 要 为 该 标签 定义 〈 ) 样式 。 
A. overflow:hidden 
B. display:block 
C. overflow:scroll 
D. display:scroll 
8. 在 HIML 网 页 中 添加 如 下 CSS 样式 ， 当 鼠标 悬浮 在 链接 上 面 时 ， 网 页 中 的 链接 呈 
现 的 颜色 为 > 
body { color:red; } 
a { color:black; } 
a:link, a:visited { color:blue; } 
a:hover, a:active { color:green; } 


A. 红色 
B. 绿色 
C. 蓝 色 
D. 黑色 
9. CSS3 属性 分 为 哪 几 类 ? 


CSS3 页 面 布局 | 


个 概述 


网 页 的 外 观 是 否 精美 ， 除 了 取决 于 内 容 以 及 色彩 搭配 之 外 ， 还 取决 于 网 页 的 布局 是 否 
合理 。 网 页 的 要 素 包 括 文字 、 图 片 、 图 表 、 菜 单 、 动 画 、 音 频 、 视 频 等 。 网 页 设计 中 的 布 
局 指 的 是 网 页 的 各 种 构成 要 素 的 有 效 排列 。 

实现 网 页 的 页 面 布局 一 般 分 为 3 种 : 表格 布局 、 框 架 布局 以 及 DIV+CSS 页 面 布局 。 

表格 布局 的 实现 方式 比较 简单 ， 早 期 的 网 站 大 多 数 采用 这 种 方式 来 布局 。 表 格 布局 容 
易 控 制 各 个 元 素 ， 相互 影响 较 小 ,浏览 器 的 兼容 性 较 好 。 但 是 ， 表格 布 局 也 存在 一 些 缺 陷 。 
首先 ， 在 某 些 浏 览 器 下 (例如 正 )， 表 格 只 有 在 下 载 完 成 后 才 可 以 显示 。 当 数据 量 比较 大 
时 ， 在 一 定 程度 上 会 影响 网 页 的 浏览 速度 。 其 次 ， 搜 索引 擎 难以 分 析 结 构 较 复杂 的 表格 ， 
而 且 网 页 样式 的 改版 维护 也 比较 麻烦 。 另 外 , 在 多 重 表格 嵌 套 的 情况 下 ， 代 码 可 读 性 较 差 ， 
页 面 下 载 的 速度 也 会 受到 影响 。 

框架 布局 指 的 是 利用 框架 来 对 页 面 空间 进行 有 效 的 划分 ， 每 个 区 域 可 以 显示 不 同 的 网 
页 内 容 ， 各 个 区 域 之 间 互 不 影响 。 使 用 框架 进行 布局 ， 可 以 使 网 页 更 整洁 、 清 晰 ， 网 页 下 
载 的 速度 较 快 。 但 是 如 果 框 架 使 用 较 多 ， 也 会 影响 网 页 的 浏览 速度 。 对 于 内 容 较 多 、 较 复 
杂 的 网 站 最 好 不 要 采用 框架 布局 。 另 外 ， 框 架 的 浏览 器 兼容 性 不 好 ， 保 存 比较 麻烦 。 而 且 
HTMLS5 中 已 明 确 不 再 支持 框架 ， 因 此 框架 布局 应 用 的 范围 有 限 。 

对 规模 较 大 、 比 较 复杂 的 网 站 大 多 数 采 用 DIV+CSS 方式 来 进行 布局 ， 这 也 是 目前 比 
较 流行 的 方式 。DIV+CSS 布局 方式 具有 较为 明显 的 优势 ， 主 要 表现 有 以 下 几 点 。 

1. 内 容 和 表现 相 分 离 

HTML 文件 主要 用 来 保存 内 容 信 息 ,网 页 的 表现 样式 使 用 CSS 实现 , 样式 规则 可 以 放 
在 一 个 单独 的 CSS 样式 表 文 件 中 。 

2. 对 搜索 引擎 的 支持 更 加 友好 

搜索 引擎 可 以 更 加 有 效 地 分 析 只 包含 结构 化 内 容 的 HIML 文件 。 

3. 文件 代码 执行 速度 更 快 。 

DIV+CSS 生成 的 HTML 文件 容量 小 ， 网 页 下 载 的 速度 快 ， 浏 览 的 效率 更 高 。 

4. 易于 维护 
由 于 网 页 的 表现 样式 通过 单独 的 CSS 文件 实现 ， 如 果 要 改版 ， 只 需要 修改 CSS 文件 ， 
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而 不 用 修改 原 HTML 文件 ,因此 页 面 样式 的 维护 更 加 方便 ,而且 也 利于 统一 整个 网 站 的 风 
格 。 对 于 一 些 大 型 的 网 站 , 可 以 使 用 不 同 的 CSS 文件 对 应 不 同 的 风格 , 更 换 起 来 非常 方便 。 

但 是 DIV+CSS 页 面 布局 也 存在 一 定 的 不 足 。DIV+CSS 方式 实现 起 来 比较 复杂 ， 初 学 
者 不 易 掌 握 。DIV+CSS 方式 对 于 元 素 的 控制 太 灵活 ， 容 易 出 错 。DIV+CSS 方式 还 没有 解 
决 浏览 器 的 完全 兼容 问题 。 例 如 , 在 正 浏览 器 上 可 以 正常 显示 的 页 面 ,， 换 作 其 他 浏览 器 显 
示 可 能 会 面目 全 非 。 使 用 DIV+CSS 布局 的 开发 周期 较 长 ， 开 发 成 本 较 高 。 


82 盒子 模型 和 DIV 


在 CSS 中 ,页 面 中 的 所 有 元 素 都 可 以 看 成 一 个 盒子 ， 占 据 着 页 面 上 的 一 定 的 空间 。 一 
个 盒子 模型 由 content (内 容 )、border (边框 )、padding (填充 ) 和 margin〈 间 隔 ) 4 部 分 
组 成 。 一 个 盒子 的 实际 宽度 或 高 度 为 : 

content + padding + border + margin 
可 以 通过 width 属性 和 height 属性 来 控制 每 一 个 盒子 的 content 的 大 小 , 也 可 以 通过 定义 各 
边 的 border、padding、margin 等 属性 的 大 小 以 实现 排版 要 求 的 效果 。 盒 子 模 型 的 示意 图 如 
图 9-1 所 示 。 
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图 9-1 盒子 模型 示意 图 


DIV 为 Division 的 简写 形式 , 代表 网 页 内 容 中 的 一 个 逻辑 区 域 。 DIV 相当 于 一 个 容器 ， 
由 起 始 标签 <div> 和 结束 标签 </div> 以 及 其 中 的 内 容 组 成 。 在 DIV 内 部 可 以 嵌 套 各 类 元 素 ， 
例如 表格 、 文 本 、 段 落 以 及 DIV 等 。DIV 有 许多 属性 ， 其 中 和 定位 布局 有 关 的 属性 如 表 
9-1 所 示 。 

1. position 属性 

position 属性 的 默认 取 值 为 static， 指 的 是 不 定位 ，DIV 按照 默认 的 位 置 显示 。 

当 position 取 值 为 relative 时 ， 指 的 是 相对 于 static 方式 时 DIV 的 位 置 偏 移 。 

当 position 取 值 为 absolute 时 ， 指 的 是 绝对 定位 ， 是 用 top、left、right、bottom 等 直接 
定位 DIV 相对 于 其 最 近 的 容器 的 位 置 , 如 果 没 有 明确 的 最 近 的 容器 ， 则 按照 相对 于 页 面 文 
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档 的 位 置 确定 。 实 际 上 ，absolute 方式 本 质 上 仍然 是 相对 定位 。 
表 9-1 DIV 的 定位 属性 及 说 明 


属性 说 明 

height DIV 的 高 度 

width DIV 的 宽度 

margin DIV 的 处 延边 距 ， 即 到 父 容 器 的 距离 ， 按 上 右 下 左 的 顺序 排列 
margin-left DIV 到 父 容器 左边 框 的 距离 

margin-right DIV 到 父 容器 右边 框 的 距离 

margin-top DIV 到 父 容器 上 边框 的 距离 

margin-bottom DIV 到 父 容器 下 边框 的 距离 

padding DIV 的 内 容 与 其 边框 之 间 的 距离 ， 按 上 右 下 左 的 顺序 排列 
padding-left DIV 的 内 容 与 其 左边 框 之 间 的 距离 

padding-right DIV 的 内 容 与 其 右边 框 之 间 的 距离 

padding-top DIV 的 内 容 与 其 上 边框 之 间 的 距离 

padding-bottom DIV 的 内 容 与 其 下 边框 之 间 的 距离 

position DIV 的 定位 方式 ， 可 取 值 static| relative| absolute| fixed 
left DIV 相对 于 文档 层次 中 最 近 一 个 定位 对 象 左 边界 的 距离 
top DIV 相对 于 文档 层次 中 最 近 一 个 定位 对 象 上 边界 的 距离 
Tight DIV 相对 于 文档 层次 中 最 近 一 个 定位 对 象 右边 界 的 距离 
bottom DIV 相对 于 文档 层次 中 最 近 一 个 定位 对 象 下 边界 的 距离 
Z-index DIV 的 层 巷 次 序 

overflow DIV 的 内 容 洲 出 控制 ， 可 取 值 scroll| visible| auto| hidden 
direction DIV 的 内 容 流 向 ， 可 取 值 ltr| rtl 

display DIV 的 显示 属性 ， 可 取 值 block| none| inline| compact 
float DIV 是 否 浮动 以 及 浮动 的 方式 ， 可 取 值 left| right| none 
clear DIV 的 浮动 清除 ， 可 取 值 none| left| right| both 


当 position 取 值 为 fixed 时 ， 指 的 是 真正 的 绝对 定位 ， 是 用 top、left、right、bottom 来 
指定 DIV 相对 于 浏览 器 的 位 置 , 即使 用 户 使 用 滚动 条 来 滚动 页 面 ， DIV 相对 于 浏览 器 的 位 
置 仍然 不 变 ， 即 在 界面 中 DIV 的 位 置 是 不 变化 的 。 对 于 目前 常用 的 浏览 器 来 说 ， 除 了 IE6 


之 外 ， 其 他 的 浏览 器 都 可 以 识别 fixed 值 。 


2. overflow 属性 


overflow 属性 可 以 指定 DIV 中 溢出 内 容 的 显示 方式 。 


当 overflow 取 值 为 visible 时 ， 

当 overflow 取 值 为 hidden 时 ， 
动 条 。 

当 overflow 取 值 为 scroll 时 ， 
的 滚动 条 。 

当 overflow 取 值 为 auto 时 ， 旧 


溢出 的 内 容 不 会 被 截断 ， 而 是 显示 在 DIV 之 外 。 
溢出 的 内 容 会 被 截断 ,而 且 浏 览 器 不 出 现 查看 内 容 的 深 


溢出 的 内 容 会 被 截断 ， 但 是 浏览 器 会 提供 查看 截断 内 容 


3. display 属性 


日 浏览 器 决定 如 何 显示 ， 如 果 必 要 ， 则 显示 滚动 条 。 


display 属性 可 以 控制 DIV 的 显示 方式 。 
当 display 取 值 为 none 时 ，DIV 不 可 见 。 
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当 display 取 值 为 inline 时 ，DIV 可 见 ， 是 行内 元 素 ，DIV 元 素 前 后 不 会 换行 。 

当 display 取 值 为 block 时 ，DIV 可 见 ， 是 块 级 元 素 ，DIV 元 素 前 后 会 出 现 换 行 。 

4. float 属性 

float 属性 可 以 定义 DIV 的 浮动 方式 。 当 float 属性 取 值 为 none 时 ，DIV 不 会 发 生 任 何 
浮动 ， 块 级 元 素 会 独占 一 行 ， 其 后 的 块 级 元 素 将 会 在 新 行 中 显示 。 此 时 的 display 属性 相当 
于 取 值 为 block，display 属性 会 被 忽略 。 
当 float 属性 取 值 为 left 时 ,DIV 会 向 左 端 浮动 ,其 后 的 DIV 的 显示 方式 和 浏览 器 有 关 。 
例如 在 下 中 , 其 后 的 DIV 在 水 平方 向 上 会 紧 随 其 后 。 但 是 在 Firefox 中 , 其 后 的 DIV 在 水 
平 的 方向 上 不 可 见 ， 但 会 显示 其 文字 。 如 果 对 两 个 DIV 都 采用 向 左 浮动 ， 则 两 个 DIV 会 
显示 在 同一 行内 ， 这 种 方式 不 存在 浏览 器 的 兼容 问题 。 

当 float 属性 值 取 right 时 ，DIV 会 向 右 端 浮动 。 

5. clear 属性 

DIV 的 clear 属性 可 用 来 清除 DIV 左右 的 浮动 。 

clear 属性 的 默认 值 为 none， 指 的 是 不 清除 浮动 ， 允 许 DIV 的 左右 两 边 存在 浮动 对 象 。 

clear 属性 取 值 为 left 时 ， 清 除 左边 的 浮动 对 象 ， 即 不 允许 左边 出 现 浮 动 对 象 。 

clear 属性 取 值 为 right 时 ， 清 除 右边 的 浮动 对 象 ， 即 不 允许 右边 出 现 浮动 对 象 。 

clear 属性 取 值 为 both 时 ,清除 左右 两 边 的 浮动 对 象 , 即 不 允许 左右 两 边 出 现 浮动 对 象 。 


8.3 页 面 布局 


- 般 的 网 页 需要 包括 标志 、 站 点 名 称 、 主 页 面 内 容 、 站 点 导航 、 子 菜单 、 搜 索 区 、 功 
能 区 以 及 页 脚 等 部 分 。 每 一 部 分 可 以 使 用 一 个 DIV 表示 ， 每 一 个 DIV 都 可 以 使 用 CSS 的 


定位 属性 使 其 显示 在 页 面 的 合适 位 置 ， 各 个 DIV 组 成 了 整个 网 页 的 结构 。 
9.3.1 简单 布局 
1. 默认 布局 


DIV 的 默认 布局 为 垂直 排列 。 每 个 DIV 在 默认 情况 下 是 块 级 元 素 ， 独 占 一 行 ，DIV 前 
后 会 出现 换行 ， 例 如 ，layoutl.html。 
layoutl.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTE=98"> 


<title> 垂 直 排列 </title> 
<style type="text/css"> 
divt{ 
width: 200px; 
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height: 30px; 
border:lpx solid gray; 
} 
La 
background-color: #90EE90; 
1 
-lay2 { 
background-color: #FFFACD; 
} 
=1ay3 { 
background-color: #F08080; 
} 
</style> 
</head> 
<body> 
<div class="layl"></div> 
<div class="lay2"></div> 
<div class="lay3"></div> 
</body> 
</html> 


layoutl.html 在 Chrome 中 的 显示 结果 如 图 9-2 所 示 。 


lies 
\ 
DD 委 直 排列 x 《se 


GC 合 10 1270018.， 女 


图 9-2 layout1.html 的 显示 结果 


2. 水 平 排列 
如 果 要 DIV 水 平 排列 , 只 需要 将 DIV 的 float 属性 设置 为 left 即 可 , 例如 ,layout2.html。 
layout2.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 水 平 排列 </title> 
<style type="text/css"> 
divt{ 
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width: 100px; 
height: 30px; 
border:lpx solid gray; 
} 
“ay of 
background-color: #90EE90; 
float: left; 
| 
-lay2 { 
background-color: #FFFACD; 
Eloat: Jofts 
-Lay3 1 
background-color: #F08080; 
float: left; 
} 
</style> 
</head> 
<body> 
<div class="layl"></div> 
<div class="lay2"></div> 
<div class="lay3"></div> 
</body> 
</html> 


在 Chrome 中 打开 layout2.html， 显 示 结 果 如 图 9-3 所 示 。 


会 自动 换行 。 


当 浏 览 器 窗口 变 小 时 ，DIV 


/| 口 水 平 排列 
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图 9-3 layout2.html 的 显示 结果 


3. DIV 的 嵌 套 
DIV 之 间 可 以 互相 嵌 套 ， 可 以 通过 设置 DIV 的 相关 


属性 来 确定 各 个 DIV 之 间 的 位 置 ， 


例如 ，layout3.html， 一 个 DIV 中 获 套 3 个 垂直 排列 的 DIV。 


layout3 .html: 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title>DIV 的 霸 套 </title> 
<style type="text/css"> 
oontaliner ¥ 
width: 300px; 
height: 100px; 
background-color: #7B68EE; 
padding-top: 10px; 
padding-right: 20px; 
padding-bottom: 10px; 
padding-left: 20px; 
text-align: center; 
border:1lpx solid gray; 
} 
-avi 
width: 200px; 
height: 30px; 
background-color: #90EE90; 
margin:auto; 
} 
-Lay2 | 
width: 200px; 
height: 30px; 
background-color: #FFFACD; 
margin:auto; 
} 
-lay3 { 
width: 200px; 
height: 30px; 
background-color: #F08080; 


margin:auto; 
} 
</style> 
</head> 
<body> 


<div class="container"> 
<div class="layl"></div> 
<div class="lay2"></div> 
<div class="lay3"></div> 
</div> 
</body> 


</html> 


layout3.html 在 Chrome 中 的 显示 结果 如 图 9-4 所 示 。 
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图 9-4 layout3.html 的 显示 结果 


注意 : 在 Firefox 浏览 器 和 Chrome 浏览 器 中 ，text-align 属性 不 起 作用 ， 为 了 使 内 层 的 
3 个 DIV 始终 居中 显示 ， 可 添加 其 margin 属性 值 为 auto。 

4. 简单 混合 布局 

通过 DIV 的 嵌 套 也 可 以 实现 简单 的 混合 布局 。 一 般 的 混合 布局 的 网 页 主要 分 成 head、 
main、footer 3 部 分 ， 其 中 main 部 分 又 可 以 分 成 左右 两 个 部 分 ， 例 如 ，layout4.html。 

layout4.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 简 单 混合 布局 </title> 
<style type="text/css"> 
body { 
margin: Opx; 
text-align: center; 
background-color: #FFFFFF; 
} 
.container { 
background-color: #FFFF93; 
width: 100%; 
} 
-header { 
background-color: #FFCC99; 
width: 100%; 
margin: 0 auto; 
height: 50px; 
} 
-pagebody { 
background-color: #90EE90; 
width: 100%; 


margin: 0 auto; 
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height: 120px; 
} 
allaobar 
background-color: orange; 
float: left; 
width: 30%; 
height: 100%; 
} 
-mainbody { 
background-color: #87CEFA; 
float: right; 
width: 70%; 
height: 100%; 
} 
.footer { 
width: 100%; 
margin: 0 auto; 
height: 20px; 
background-color: yellow; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="header"></div> 
<div class="pagebody"> 
<div class="slidebar"></div> 
<div class="mainbody"></div> 
</div> 
<div style="clear:both"></div> 
<div class="footer"></div> 
</div> 
</body> 
</html> 


layout4.html 在 Chrome 浏览 器 中 的 显示 结果 如 图 9-5 所 示 。 


9.3.2 圣杯 布局 


圣杯 布局 是 3 列 水 平 排列 , 左右 列 宽度 固定 , 中 间 列 自 适应 。 圣杯 布局 是 Kevin Comell 
在 2006 年 提出 的 布局 模型 概念 , 在 国内 最 早 是 由 淘宝 的 工程 师 改进 并 传播 开 来 。 它 的 布局 
要 求 有 3 点 : 

。 3 列 布 局 ， 中 间 列 宽度 自 适应 ， 左 列 、 右 列 宽度 固定 ; 

。 中 间 列 要 在 浏览 器 中 优先 展示 泻 染 ; 


图 9-5 layout4.html 的 显示 结果 


。 允许 任意 列 的 高 度 最 高 。 
例如 ，layout5.html。 
layoutS.html: 
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margin-right: -200px; 
background-color: red; 
width:120px; 
上 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="main">main</div> 
<div class="left">left</div> 
<div class="right">right</div> 
</div> 
</body> 
</html> 


layout5.html 在 Chrome 中 的 显示 结果 如 图 9-6 所 示 。 
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图 9-6 layout5.html 的 显示 结果 


当 浏览 器 窗口 宽度 变 小 时 ， 中 间 栏 宽度 变 小 ， 为 了 避免 窗口 宽度 过 小 时 ，DIV 出 现 换 


行 的 情况 ， 可 以 设置 包含 DIV 的 container 的 最 小 宽度 。 


9.3.3 ”多 栏 布局 


CSS3 的 多 栏 布局 支持 对 文本 进行 多 列 显示 。 目 前 ， 焉 10+ 以 及 其 他 所 有 的 现代 浏览 器 
都 支持 此 类 属性 。 卫 浏览 器 不 需要 私有 前 级 ，Firefox 和 Chrome 虽然 也 可 以 不 加 前 级 ， 但 
是 考虑 到 移动 端 以 及 一 些 用 户 浏览 器 的 版 本 较 低 的 问题 ， 因 此 Firefox 浏览 器 需要 加 前 级 


“-moz-”，Chrome 浏览 器 需要 加 前 级 “-webkit-”。 多 列 有 关 的 属性 包括 : 


。 column-width 一 一 列 宽 。 

。 column-count 一 一 列 数 。 

。 column-gap 一 一 列 与 列 之 间 的 距离 。 

。 column-rule 一 一 复合 属性 ， 列 与 列 之 间 的 边框 。 
。 column-rule-width 一 一 列 与 列 之 间 的 边框 宽度 。 
。 column-rule-style 一 一 列 与 列 之 间 的 边框 样式 。 

。 column-rule-color 一 一 列 与 列 之 间 的 边框 颜色 。 
column-span 一 一 是 否 横 跨 所 有 列 。 

所 有 列 高 度 是 否 统一 。 


column-fill 
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。 column-break-before 一 一 对 象 之 前 是 否 断 行 。 

e column-break-after 一 一 对 象 之 后 是 否 断 行 。 

。 column-break-inside 一 一 对 象 内 部 是 否 断 行 。 

e columns: 复合 属性 ， 对 象 的 列 数 和 每 列 的 宽度 。 
多 栏 布局 的 示例 可 参考 layout6.html。 


layout6.html: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 多 栏 </title> 
<style type="text/css"> 
div { 
font-size: 1l0pt; 
width: 500px; 
column-rule: 2px solid green; 
-moz-column-rule: 2px solid green; 
-webkit-column-rule: 2px solid green; 
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-count: 3; 
-moz-column-gap: 20px; 
—webkit-column-gap: 20px; 
column-gap: 20px; 
} 
</style> 
</head> 
<body> 
<div> 
Five score years ago, a great American, in whose symbolic shadow 
we stand signed the Emancipation Proclamation. This momentous 
decree came as a great beacon light of hope to millions of Negro 
slaves who had been seared in the flames of withering injustice. 
It came as a joyous daybreak to end the long night of captivity. 
</div> 
</body> 
</html> 


layout6.html 的 显示 结果 如 图 9-7 所 示 。 
9.3.4 弹性 伸缩 布局 


2009 年 ，W3C 提出 了 全 新 的 Flex 布局 ， 即 弹性 伸缩 布局 ， 它 可 以 简便 、 完 整 、 响 应 
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式 地 实现 各 种 页 面 布局 。 目 前 ，Flex 布局 已 经 得 到 了 所 有 浏览 器 的 支持 。Flex 布局 分 为 旧 
版 本 、 新 版 本 以 及 混合 过 渡 版 本 3 种 不 同 的 编码 方式 。 


y 口 多 栏 x 全 
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Five score years ago. a great | momentous decree came as injustice. It came as a 
American, in whose a great beacon light of hope | joyous daybreak to end the 
symbolic shadow we stand to millions of Negro slaves long night of captivity. 
signed the Emancipation who had been seared in the 

Proclamation. This flames of withering 


图 9-7 layout6.html 的 显示 结果 


2009 年 的 版 本 为 旧版 本 ， 通 过 display: box 或 者 display: inline-box 实现 。2011 年 的 版 
本 为 混合 版 本 ， 使 用 display: flexbox 或 者 display: inline-flexbox 实现 。 最 新 的 版 本 使 用 
display: flex 或 者 display: inline-flex 实现 。 目 前 的 主流 浏览 器 均 支持 最 新 版 本 ,不 过 在 webkit 
内 核 的 浏览 器 前 需要 使 用 前 级 “-webkit-”， 即 display:-webkit-flex。 

1. 容器 属性 

采用 Flex 布局 的 元 素 ， 称 为 Flex 容器 ， 简 称 为 容器 。 它 的 所 有 子 元 素 自 动 成 为 容器 
成 员 ， 简 称 为 项 目 。 容 器 默认 存在 两 根 轴 ， 即 水 平 的 主轴 和 垂直 的 交叉 轴 。 主 轴 的 开始 位 
置 称 为 main start， 结 束 位 置 称 为 main end， 交 叉 轴 的 开始 位 置 称 为 cross start， 结 束 位 置 称 
为 cross end。 容器 属性 包括 flex-direction、 flex-wrap、flex-flow、 justify-content、 align-items、 
align-content。 

1) flex-direction 

flex-direction 属性 决定 主轴 的 方向 ， 即 项 目的 排列 方向 ， 可 取 值 为 : 

。 row 一 一 主轴 为 水 平方 向 ， 起 点 在 左 端 。 

。 row-reverse 一 一 主轴 为 水 平方 向 ， 起 点 在 右 端 。 

。 column 一 一 主轴 为 垂直 方向 ， 起 点 在 上 沿 。 

。 column-reverse 一 一 主轴 为 垂直 方向 ， 起 点 在 下 沿 。 

2) flex-wrap 

默认 情况 下 ， 所 有 项 目 都 排 在 一 条 轴线 上 ，flex-wrap 属性 定义 如 果 一 条 轴线 排 不 下 ， 
如 何 换行 。 可 取 值 为 : 

。 nowrap 一 一 不 换行 。 

。 wrap 一 一 换行 ， 第 一 行 在 上 方 。 

。 wrap-reverse 一 一 换行 ， 第 一 行 在 下 方 。 

3) flex-flow 

flex-flow 属性 是 flex-direction 属性 和 flex-wrap 属性 的 简写 形式 ,默认 值 为 row nowrap。 

4) justify-content 

justify-content 属性 定义 了 项 目 在 主轴 上 的 对 齐 方 式 ， 对 齐 方式 与 主轴 的 方向 有 关 ， 假 
设 主轴 的 方向 为 从 左 到 右 。 可 取 值 为 : 
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。 flex-start 一 一 左 对 齐 。 

。 flex-end 一 一 右 对 齐 。 

se center 一 一 居中 。 

。 space-between 一 一 两 端 对 齐 。 

。 space-around 一 一 每 个 项 目 两 侧 的 间隔 相等 。 

5) align-items 

align-items 属性 定义 项 目 在 交叉 轴 上 的 对 齐 方式 ， 即 一 般 意义 上 的 垂直 对 齐 方式 。 具 
体 的 对 齐 方 式 与 交叉 轴 的 方向 有 关 ， 假 设 交 义 轴 的 方向 为 从 上 到 下 。 可 取 值 为 : 

。 flex-start 一 一 与 交叉 轴 的 起 点 对 齐 。 

。 flex-end 一 一 与 交叉 轴 的 终点 对 齐 。 

。 center 一 一 与 交叉 轴 的 中 点 对 齐 。 

。 baseline 一 一 与 基线 对 齐 。 

。 stretch 一 一 如 果 项 目 未 设置 高 度 或 设 为 auto， 将 占 满 整 个 容器 的 高 度 。 

6) align-content 

align-content 属性 定义 了 多 根 轴线 的 对 齐 方式 ， 如 果 项 目 只 有 一 根 轴线 ， 则 此 属性 不 
起 作用 。 可 取 值 为 : 

。 flex-start 一 一 与 交叉 轴 的 起 点 对 齐 。 

。 flex-end 一 一 与 交叉 轴 的 终点 对 齐 。 

。 center 一 一 与 交叉 轴 的 中 点 对 齐 。 

。 space-between 一 一 两 端 对 齐 ， 轴 线 之 间 的 间隔 平均 分 布 。 

。 space-around 一 一 每 根 轴线 两 侧 的 间隔 相等 。 

。 stretch 一 一 轴线 占 满 整个 交叉 轴 。 

2. 项 目 属性 

项 目 默 认 沿 主轴 排列 ， 单 个 项 目 占据 的 主轴 空间 称 为 main size， 占 据 的 交叉 轴 空 间 称 
为 cross size。 项 目 属性 包括 : 

。 order 一 一 项 目的 排列 顺序 ， 数 值 越 小 越 靠 前 ， 默 认为 0。 

。 flex-grow 一 一 项 目的 放大 比例 。 

。 flex-shrink 一 一 项 目的 缩小 比例 。 


。 flex-basis 一 一 在 分 配 多 余 空 间 之 前 ， 项 目 占 据 的 主轴 空间 。 
。 flex 一 一 flex-grow、flex-shrink 和 flex-basis 的 简写 。 


。 align-self 一 一 单个 项 目 与 其 他 项 目 不 一 样 的 对 齐 方式 ， 可 覆盖 align-items 属性 。 
弹性 伸缩 布局 的 使 用 示例 可 参照 layout7.html。 
layout7.html: 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
<title> 弹 性 伸缩 布局 </title> 
<style type="text/css"> 
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.container{ 
display:flex; 
width:500px; 
height:160px; 
border:lpx solid black ; 
background-color:#90EE90; 
font-size:20pt; 
text-align:center; 
justify-content: space-between; 
} 
.iteml{ 
width:50px; 
height:100px; 
background-color:yellow; 
border:2px solid orange; 
} 
.item2{ 
width:50px; 
height:50px; 
background-color:yellow; 
border:2px solid orange; 
} 
.item3{ 
width:50px; 
height:120px; 
background-color:yellow; 
border:2px solid orange; 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="iteml">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="iteml">4</div> 
<div class="item2">5</div> 
<div class="item3">6</div> 
<div class="iteml">7</div> 
</div> 
</body> 
</html> 


layout7.html 的 显示 结果 如 图 9-8 所 示 。 
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9-8 layout7.html 的 显示 结果 


84 DIV 浮动 


当 DIV 的 float 属性 取 值 为 left 或 者 right 时 ， 即 成 为 浮动 对 象 。DIV 用 于 网 页 布局 时 ， 


一 般 都 是 嵌 套 的 。 如 果 外 层 的 DIV 没有 设 定 大 小 ， 


而 内 层 的 DIV 又 是 浮动 的 ， 浮 动 对 象 


的 物理 位 置 会 脱离 文档 流 ， 因 而 对 其 父 元 素 或 者 其 后 的 元 素 的 布局 会 产生 影响 ， 甚 至 会 出 
现 布局 混乱 的 现象 。 例 如 ，layout8.html， 外 层 的 DIV 无 法 自 适应 高 度 的 变化 。 


layout8.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title>DIV 无 法 自 适应 高 度 </title> 


<style type="text/css"> 
.container { 
background-color: 


#7B68EE; 


text-align: center; 


margin-left: auto; 


margin-right: auto; 


padding: 10px; 

} 

-layl { 
width: 30%; 
height: 50px; 
background-color: 
float: left; 

} 

=ay2 lt 
width: 60%; 
height: 60px; 
background-color: 


#90EE90; 


#FFFACD; 
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Eloate rlqht> 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="layl"></div> 
<div class="lay2"></div> 
</div> 
</body> 
</html> 


layout8.html 的 显示 结果 如 图 9-9 所 示 。 


/ 中 DIV 无 法 和 适应 高 度 
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图 9-9 layout8.html 的 显示 结果 


以 上 的 代码 中 外 层 的 DIV 婴 套 了 内 层 浮 动 的 DIV， 外 层 DIV 的 高 度 无 法 自 适应 内 层 
元 素 的 变化 。 其 实 内 层 的 DIV 因为 设置 了 浮动 ， 所 以 层级 会 提高 ， 外 层 DIV 无 法 再 包 囊 
内 层 的 DIV。 如 果 使 用 属性 确定 外 层 DIV 的 大 小 ， 可 以 使 其 可 见 ， 但 是 缺少 了 灵活 性 ， 不 
能 自 适 应 高 度 的 变化 。 如 果 全 部 的 元 素 都 采用 浮动 ， 由 于 DIV 的 控制 非常 灵活 ， 比 较 容 易 
出 现 混乱 。 要 保留 外 层 DIV 自 适应 大 小 的 特点 ， 又 要 避免 浮动 带 来 的 影响 ， 可 以 通过 清除 
浮动 的 方法 来 解决 。 

清除 浮动 可 以 消除 浮动 对 象 对 其 他 元 素 的 影响 。 一 般 可 以 采用 4 种 方法 来 清除 浮动 ， 
分 别 为 使 用 空 标签 、 使 用 overflow 属性 、 使 用 :after 伪 元 素 以 及 浮动 外 部 元 素 。 

1. 使 用 空 标签 

使 用 空 标签 是 最 常用 的 清除 浮动 的 方法 ， 也 是 W3C 推荐 使 用 的 方法 。 空 标签 可 以 采 
用 块 级 元 素 , 例如 <div>、<p> 以 及 <br /> 等 ,在 浮动 元 素 之 后 添加 一 个 空 标签 ， 并 使 其 clear 
属性 取 值 为 both (或 者 除 none 之 外 的 其 他 属性 值 )。clear 属性 值 为 both 时 ， 指 元 素 的 显示 
不 受 浮动 层 的 影响 ， 而 父 级 元 素 可 以 包括 空 标签 ， 因 而 父 级 元 素 不 再 受 内 层 浮动 对 象 的 影 
响 。 使 用 空 标签 清除 浮动 实现 起 来 非常 简单 ， 但 是 在 文档 区 域 增加 了 无 意义 的 元 素 ， 修 改 
了 文档 的 结构 。 使 用 空 标签 清除 浮动 的 示例 可 参照 layout9.html。 

layout9.html: 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 使 用 空 标签 消除 浮动 </title> 
<style type="text/css"> 
eontalner Ff 
background-color: #7B68EE; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
padding: 10px; 
la 
width: 30%; 
height: 50px; 
background-color: #90EE90; 
float: left; 
} 
<ay2 ft 
width: 60%; 
height: 60px; 
background-color: #FFFACD; 
float: right; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="layl"></div> 
<div class="lay2"></div> 
<div style="clear:both"></div> 
</div> 
</body> 
</html> 


layout9.html 在 Chrome 浏览 器 中 的 显示 结果 如 图 9-10 所 示 ， 改 变 窗口 的 宽度 ， 外 层 
DIV 可 以 自 适 应 内 层 元 素 的 宽度 变化 。 
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图 9-10 layout9.html 的 显示 结果 
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2. 使 用 overflow 属性 

也 可 以 把 父 级 元 素 的 overflow 属性 值 设置 成 hidden、auto 或 者 scroll 来 清除 浮动 。 例 
如 ，layout10.html。 

layout10.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 overflow 属性 消除 浮动 </title> 
<style type="text/css"> 
.container { 
background-color: #7B68EE; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
padding: 10px; 
overflow: auto; 
zoom: 1; 
} 
.layl { 
width: 30%; 
height: 50px; 
background-color: #90EE90; 
float: left; 
} 
clay nl 
width: 60%; 
height: 60px; 
background-color: #FFFACD; 
FLoats rights 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="layl"></div> 
<div class="lay2"></div> 
</div> 
</body> 
</html> 


layout10.html 在 Chrome 浏览 器 中 的 显示 结果 如 图 9-11 所 示 。 
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图 9-11 layout10.html 的 显示 结果 


3. 使 用 :after 伪 元 素 

:after 伪 元 素 是 在 CSS2 规范 里 提出 来 的 ， 容 器 的 所 有 的 子 元 素 最 后 自动 生成 一 个 伪 元 
素 ， 并 为 伪 元 素 设 定 样式 ， 设 定 样式 时 使 用 clear 属性 清除 浮动 。 例 如 ，layout11.html。 

layout11.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 伪 元 素 消除 浮动 </title> 
<style type="text/css"> 

.container:after { 
Content 
clear: both; 
display: block; 
visibility: hidden; 
height: Opx; 

} 

.container { 
background-color: #7B68EE; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
padding: 10px; 

} 

.layl { 
width: 30%; 
height: 50px; 
background-color: #90EE90; 
float: left; 
zoom: 工 7 
display: block; 

J 

“lay2 于 
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width: 60%; 
height: 60px; 
background-color: #FFFACD; 
float: right; 
zoom: 1; 
display: block; 
| 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="layl"></div> 
<div class="lay2"></div> 
</div> 
</body> 
</html> 


layoutl1.html 在 Chrome 浏览 器 中 的 显示 结果 如 图 9-12 所 示 。 


/ 口 使 及 元 素 MisS 动  x 人 
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图 9-12 layout11.html 的 显示 结果 


注意 : 使 用 伪 元 素 清除 浮动 时 ， 必 须 将 要 清除 浮动 的 元 素 中 的 伪 元 素 的 高 度 设置 成 0， 
将 visibility 设置 成 hidden; 否则 生成 的 伪 元 素 会 比 实际 高 度 高 出 若干 像素 。 另 外 ， 伪 元 素 
的 content 属性 值 是 必需 的 ， 可 以 为 空 ， 一 般 设置 成 “.”。 

4. 浮动 外 部 元 素 

当 内 部 元 素 为 浮动 对 象 时 ， 也 可 以 将 外 部 元 素 设置 成 浮动 对 象 ， 这 样 外 部 元 素 可 以 包 
含 浮动 元 素 。 但 是 使 用 这 种 方法 需要 将 页 面 中 浮动 元 素 的 所 有 外 部 元 素 全 都 设置 成 浮动 对 
象 ， 一 直到 body， 在 实际 应 用 中 一 般 不 推荐 使 用 。 

除了 以 上 几 种 消除 浮动 的 方法 之 外 ， 还 可 以 将 父 级 元 素 的 display 设置 成 table 或 者 
table-cell， 将 父 级 元 素 以 table 的 形式 显示 以 包含 浮动 元 素 。 


8.5， 实 用 技巧 


在 使 用 DIV+CSS 进行 页 面 布 局 时 ， 有 一 些 实用 的 技巧 。 
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1. 使 网 页 整体 居中 
要 使 最 外 层 的 div 在 页 面 上 居中 显示 ， 可 使 用 以 下 样式 : 
#container{ 
margin: 0 auto; 
text-align: center; 
} 


其 中 ,“margin: 0 auto;” 指 的 是 上 下 边 距 为 0， 左 右 为 自动 边 距 ， 对 于 IE6 以 上 的 浏览 器 可 
以 实现 居中 。“text-align: center;” 是 为 了 兼容 IE6 以 下 版 本 的 浏览 器 。 

2. 颜色 的 表示 

颜色 可 以 使 用 英文 单词 ， 或 者 使 用 6 位 十 六 进 制 数 表 示 ， 如 果 每 两 位 的 值 相同 ， 可 以 
使 用 缩写 ， 例 如 “#AABBCC”， 可 以 缩写 成 “#ABC”。 一 般 情况 下 , 在 同一 个 CSS 配置 中 ， 
不 要 同时 使 用 全 写 和 缩写 ， 为 了 可 读 性 好 ， 推 荐 使 用 全 写 。 

3. 关于 上 下 左右 的 属性 值 写 法 

在 CSS 中 , 有 一 些 属性 是 区 分 上 下 左右 的 , 根据 属性 值 个 数 的 不 同 , 对 应 于 上 右 下 左 。 
例如 : 


padding: valuel; 
表示 上 、 下 、 左 、 右 的 内 边 距 都 是 valuel 。 
padding: valuel value2; 


表示 上 、 下 内 边 距 是 valuel， 左 、 右 内 边 距 是 value2。 


padding: valuel value2 value3; 
表示 上 内 边 距 是 valuel， 左 、 右 内 边 距 是 value2， 下 内 边 距 是 value3。 
padding: valuel value2 value3 valued; 


表示 上 、 右 、 下 、 左 分 别 对 应 于 valuel、value2、value3、value4。 

4. 度量 值 的 单位 不 可 省 略 ， 除 非 为 0 

在 CSS 中 ， 除 了 行 高 和 0 值 不 需要 定义 单位 之 外 ， 其 他 情况 都 必须 加 上 单位 ， 在 数值 
和 单位 之 间 不 可 以 加 空格 。 

5. 选择 符 的 优先 级 

CSS 中 的 类 选择 符 可 以 重复 使 用 ,而 id 选择 符 一 般 只 使 用 一 次 。 如 果 页 面 元 素 同时 使 
用 了 类 选择 符 和 id 选择 符 , 并 且 定义 的 样式 出 现 冲突 时 , id 选择 符 的 优先 级 高 于 类 选择 符 。 

6. 默认 值 

CSS 中 的 属性 一 般 都 有 默认 值 ， 例 如 ， 通 常 padding 的 默认 值 为 0，background-color 
的 默认 值 为 transparent， 但 是 在 不 同 的 浏览 器 下 的 默认 值 可 能 不 同 ， 为 了 避免 不 兼容 而 造 
成 的 问题 ， 可 以 使 用 CSS 设 定 元 素 的 属性 值 : 

bb 


margin: 0; 


padding: 0; 
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} 


以 上 代码 将 所 有 元 素 的 margin 属性 值 以 及 padding 属性 值 都 设置 成 0。 

7. 超级 链接 的 样式 

如 果 超 级 链接 的 伪 类 在 设置 样式 时 的 顺序 不 正确 ， 可 能 会 导致 超级 链接 访问 过 后 不 能 
再 使 用 :hover 样式 和 :active 样式 ， 在 CSS 中 声明 超级 链接 在 不 同 的 状态 的 样式 时 ， 应 该 按 
照 :link、:visited、:hover、:active 的 顺序 。 

8. IE 的 双 售 边 距 

当 页 面 中 的 元 素 为 块 级 元 素 , 左 浮动 并 且 具 有 左 外 边 距 时 , IE 会 出 现 双 倍 边 距 的 错误 。 
例如 : 

<div style="float: left; margin-left: lOpx; width: 420px; height: 150px; 

border: 1 solid red"> 

</div> 


在 下 浏览 器 上 显示 时 会 使 左 外 边 距 成 为 20px, 解决 的 办 法 是 将 元 素 转 化 成 内 联 元 素 ， 
即 设置 display 属性 值 为 inline。 

9， 高 度 问 题 

如 果 div 设置 了 固定 的 高 度 ， 但 是 div 里 的 实际 内 容 的 高 度 大 于 设置 的 高 度 ， 正 浏览 
器 会 自动 拉 伸 div 容器 。Firefox 不 能 自动 拉 伸 div 的 高 度 ， 超 出 范围 的 内 容 会 出 现 重 炙 的 
现象 。 为 了 兼容 各 类 浏览 器 ， 可 以 将 高 度 设 置 成 自动 调整 ， 或 者 将 overflow 属性 设置 成 
hidden 。 
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9.6.1 主流 的 浏览 


目前 ， 流 行 的 浏览 器 有 很 多 种 ， 例 如 正 、Firefox、Safari、Chrome 等 ， 而 同一 种 浏览 
器 的 版 本 也 各 不 相同 ， 例 如 正 7、I8、IE9、IE10 等 。 

4 上 框 

正 浏览 器 是 由 微软 公司 开发 的 与 Windows 操作 系统 捆绑 的 Web 浏览 器 ， 它 最 初 是 由 
一 款 商业 性 的 专利 网 页 浏览 器 Spyglass Mosaic 衍生 而 来 。IE 曾经 是 使 用 最 广泛 的 浏览 器 ， 
但 是 市 场 占 用 率 在 逐年 下 降 。 目 前 最 新 的 版 本 是 下 10，IE11 为 预览 版 ， 目 前 不 提供 下 载 。 

2. Firefox 

Mozilla Firefox 中 文通 称 为 “火狐 ” 是 一 个 开源 的 浏览 器 。 它 是 由 Mozilla 基金 会 与 
开源 团体 共同 开发 的 网 页 浏览 器 。Firefox 体积 小 ， 速 度 快 。 它 具有 标签 方式 ， 可 以 屏蔽 弹 
出 式 窗口 ， 自 定义 工具 栏 ， 进 行 安全 保护 和 立体 搜索 。Firefox 从 发 行 初期 至 今 ， 市 场 占用 
率 不 断 增 高 。 根 据 英 国防 病毒 公司 Sophos 的 最 新 调查 数据 显示 ，Firefox 连续 3 年 成 为 互 
联网 用 户 最 受信 赖 的 浏览 器 。Firefox 目前 的 最 新 版 本 是 2018 年 5 月 16 日 发 行 的 Firefox 
60.0.1。 


第 9 章 ， CSS3 页 面 布局 2 


3. Safari 

Safari 是 基于 苹果 Mac OS 义 操 作 系统 中 的 浏览 器 。Safari 在 2003 年 1 月 首发 了 测试 
版 ，Windows 的 首 个 测试 版 在 2007 年 6 月 推出 。Safari 使 用 了 苹果 自己 的 内 核 ， 使 用 了 
Webkit 引擎 。Safari 也 是 iPhone 手机 、iPod Touch、iPad 平板 电脑 中 iOS 指定 的 默认 浏览 
器 。Safari 可 以 惊人 的 速度 演 染 网 页 ， 与 Mac、PC 及 iPod touch、iPhone、iPad 完美 


兼容 。 
4. Chrome 
Google Chrome 是 由 Google 开发 的 开放 源 代码 的 浏览 器 。Chrome 最 主要 的 特点 是 简 


单 、 速 度 快 。 它 支持 多 标签 浏览 ， 标 签 之 间 相 互 独立 ， 一 个 标签 页 面 的 崩溃 不 会 影响 到 其 
他 的 标签 页 面 。Chrome 基于 更 强大 的 JavaScript V8 引擎 ， 利 用 内 置 独立 的 JavaScript V8 
来 提高 运行 JavaScript 的 速度 。 目 前 ，Chrome 已 成 为 使 用 最 广泛 的 浏览 器 ， 拥 有 最 高 的 市 
场 占用 率 。 

5. Opera 

Opera 是 由 Opera Software 开发 的 一 款 适 用 于 各 种 平台 、 操 作 系统 和 购 入 式 网 络 产品 
的 浏览 器 , 可 以 在 Windows、Mac 和 Linux 3 个 操作 系统 平台 上 运行 。 Opera 浏览 器 速度 快 ， 
体积 小 ， 比 其 他 浏览 器 拥有 更 好 的 兼容 性 。Opera 浏览 器 的 最 新 版 本 为 2018 年 5 月 发 行 的 
Opera 53.0.2907.68。 


9.6.2 CSS hack 的 分 类 


由 于 各 个 浏览 器 对 CSS 的 解析 存在 差异 , 因此 可 能 会 导致 在 不 同 的 浏览 器 上 显示 的 页 
面 不 相同 。 为 了 使 得 各 个 浏览 器 的 显示 页 面 尽量 统一 ， 需 要 针对 不 同 的 浏览 器 提供 不 同 
的 CSS 代码， 这 个 过 程 称 为 CSS hack。 在 声明 CSS 时 ，CSS 的 大 部 分 属性 值 可 以 继承 和 

CSS hack 大 致 有 3 种 表现 形式 ，CSS 属性 前 缀 法 、 选 择 器 前 绥 法 以 及 正 条 件 注释 法 ， 
实际 应 用 中 的 CSS hack 大 部 分 是 由 于 正 浏览 器 不 同 版 本 之 间 的 表现 差异 而 引入 的 。 

1. CSS 属性 前 组 法 

CSS 属性 前 缀 法 即 CSS 类 内 部 hack， 指 的 是 各 个 浏览 器 可 以 识别 的 特殊 符号 或 标识 ， 
例如 ， 在 标准 模式 下 ，IE6 可 以 识别 “*” 和 “-” IE7 可 以 识别 “*”， 但 不 能 识别 “-”; 
各 种 符号 的 说 明 如 表 9-2 所 示 。 

表 9-2 CSS hack 中 的 符号 说 明 


符号 可 以 识别 的 浏览 器 举例 

0 IE8、 IE9、 IE10 background-color: red \0; 

这 IE6、 IE7 *background-color: black; 
- IE6 -background-color: orange; 
‘90 IE9、 IE10 background-color: red \9\0; 
# 正 系列 #background-color: blue; 
地 IE7 +background-color: blue: 


limport 正 7、IE8、IE9、 正 10、 现 代 浏 览 器 background-color: green !important:; 
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2. 选择 器 前 组 法 
选择 器 hack 指 的 是 将 特殊 符号 和 CSS 的 选择 器 结合 使 用 。 例 如 ，*html.class{} 可 以 被 
IE6 识别 ，*+html.class 人 可 以 被 正 7 识别 。 


例如 : 

body{ 
background-color: red; /* 一 般 浏 览 器 背景 色 为 红色 */ 
*background-color: blue; /*IE 浏览 器 的 背景 色 为 蓝 色 ， 覆 六 了 红色 */ 


*background-color: green !import; /*IE7 的 背景 色 为 绿色 ， 覆 闵 了 蓝 色 */ 
} 


3. IE 条 件 注释 法 

正 条 件 注释 法 即 HTML 头 部 引用 的 条 件 注释 ， 根据 正 浏览 器 的 版 本 来 决定 哪些 CSS 
代码 生效 ， 因 此 这 种 方式 只 对 正 浏览 器 有 效 。 当 前 的 正 浏览 器 的 主要 版 本 是 下 6、 正 7、 
IE8、IE9、IE10， 而 这 几 个 版 本 的 正 对 XHTML+CSS 的 解释 并 不 完全 相同 。 通 过 条 件 注 
释 可 以 针对 不 同 的 正 版 本 分 别 定义 。 例 如 : 


<!--[if IE]--> 
这 里 是 HTML 代码 
<!--[endif]--> 


对 于 以 上 代码 ， 如 果 客 户 端 的 浏览 器 是 正 ， 则 中 间 的 HTML 代码 会 生效 ， 如 果 客 户 端的 
浏览 器 不 是 焉 ， 会 被 作为 注释 忽略 掉 。 
此 外 ， 还 可 以 判断 正 的 版 本 号 ， 例 如 : 


二 = [宇和 IE6]==> 
这 里 是 HTML 代码 
<!-- [endif]--> 


以 上 HTML 代码 只 对 IE6 浏览 器 有 效 。 
如 果 要 判断 的 不 是 正 的 具体 的 版 本 号 ， 而 是 范围 ， 则 可 以 使 用 版 本 的 比较 ， 比 较 符号 
如 表 9-3 所 示 。 


表 9-3 判断 IE 版 本 时 的 比较 符号 


比较 符号 说 明 

lte 小 于 或 等 于 

1t 小 于 

gte 大 于 或 等 

gt 夫 于 

! 不 等 于 
例如 : 


<style type="text/css"> 
body{ 
background-color: red; 
} 
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</style> 
<!--[if lte IE7]-—-—> 
body{ 
background-color: green; 
} 
<!--[endif]--> 
以 上 代码 的 作用 是 对 于 下 7 及 IE7 以 下 的 浏览 器 , 网 页 的 背景 色 为 绿色 ; 对 于 非 正 浏览 器 
及 正 7 以 上 的 浏览 器 ， 网 页 的 背景 色 为 红色 。 
注意 : <!--[if !IE]-->.….<!--[endif]--> 在 非 正 浏览 器 下 会 作为 注释 被 忽略 掉 ， 实 际 上 不 
起 作用 。 


小 结 


。 在 CSS 中 ， 页 面 中 的 所 有 元 素 都 可 以 看 成 一 个 盒子 ， 占 据 着 页 面 上 的 一 定 的 空间 。 
DIV 全 称 为 Division， 代 表 网 页 内 容 中 的 一 个 逻辑 区 域 。DIV 相当 于 一 个 容器 ， 由 
起 始 标 签 <div> 和 结束 标签 </div> 以 及 其 中 的 内 容 组 成 。 在 DIV 内 部 可 以 嵌 套 各 类 
元 素 。 

一 般 的 网 页 需要 包括 标志 、 站 点 名 称 、 主 页 面 内 容 、 站 点 导航 、 子 菜单 、 搜 索 区 、 
功能 区 以 及 页 脚 等 部 分 。 每 一 部 分 可 以 使 用 一 个 DIV 表示 。 各 个 DIV 组 成 了 整个 
网 页 的 结构 。 

CSS3 的 多 栏 布局 支持 对 文本 进行 多 列 显 示 。 

2009 年 ，W3C 提出 了 全 新 的 Flex 布局 ， 即 弹性 伸缩 布局 ， 它 可 以 简便 、 完 整 、 响 
应 式 地 实现 各 种 页 面 布局 。 

可 以 通过 清除 浮动 的 方法 来 消除 浮动 对 象 对 其 他 元 素 的 影响 。 一 般 可 以 采用 4 种 方 
法 来 清除 浮动 ， 分 别 为 使 用 空 标签 、 使 用 overflow 属性 、 使 用 :after 伪 元 素 以 及 浮 
动 外 部 元 素 。 

各 个 浏览 器 对 CSS 的 解析 存在 差异 , 因此 可 能 会 导致 在 不 同 的 浏览 器 上 显示 的 页 面 
不 相同 。 为 了 使 得 各 个 浏览 器 的 显示 页 面 尽量 统一 ， 需 要 针对 不 同 的 浏览 器 提供 不 
同 的 CSS 代码 ， 这 个 过 程 称 为 CSS hack。 


习题 
1. div 和 span 有 什么 区 别 ? 
2. Web 标准 有 几 部 分 构成 ? 
3. 使 用 表格 布局 和 DIV+CSS 布局 有 何不 同 ? 
4. 改变 元 素 的 外 边 距 使 用 〈 ) 属性 ， 改 变 元 素 的 内 边 距 使 用 ( ) 属性 。 
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5. 合理 的 页 面 布局 是 实现 结构 与 表现 分 离 ,结构 使 用 ( ”) 实现 , 表现 使 用 (  ) 


. 当 元 素 


.为 什么 
.如 何在 


‘OO?° 


的 float 属性 和 margin 属性 同时 使 用 时 ， 如 何 解决 正 6 的 双 倍 边 距 的 问题 ? 


. 在 了 下 6 浏览 器 下 怎样 定义 高 度 为 1px 的 容器 ? 


在 Firefox 下 ， 文 本 无 法 撑 开 容器 的 高 度 ? 
IE 和 Firefox 中 实现 嵌 套 的 DIV 居中 ? 


10. 请 使 


CSS 实现 以 下 效果 ， 页 面 上 有 排列 在 同一 行 的 3 个 DIV， 两 边 的 DIV 的 


宽度 固定 为 180px， 中 间 的 DIV 为 自 适应 宽度 。3 列 的 高 度 都 可 以 被 内 容 撑 开 。 
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《or JavaScript 简介 


JavaScript 是 Netscape 公司 与 Sun 公司 共同 开发 的 脚本 语言 ， 用 于 为 网 页 添加 交互 功 
能 ， 比 如 校 验 数据 、 响 应 用 户 的 操作 等 。JavaScript 是 基于 对 象 和 事件 驱动 的 客户 端 脚 本 语 
言 ， 它 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语言 、 内 置 支持 类 。JavaScript 的 主要 目的 是 为 了 
解决 服务 器 端 语 言 遗留 的 速度 问题 ， 特 别 是 客户 端的 数据 校 验 由 JavaScript 完成 ， 减 轻 了 
服务 器 端的 负担 ， 提 高 了 网 页 浏览 的 速度 。 

JavaScript 的 功能 很 强大 ， 可 以 实现 数学 计算 、 表 单 验证 、 表 单 特 效 等 ， 但 是 JavaScript 
的 功能 仅 限 于 客户 端 使 用 , 和 服务 器 端 不 能 进行 交互 , 因而 并 不 是 真正 的 动态 网 页 设计 技术 。 

JavaScript 与 Java 除了 名 称 和 命名 规范 有 些 类 似 之 外 ， 本 质 上 是 不 同 的 。Java 是 一 种 
面向 对 象 的 高 级 程序 设计 语言 ， 而 JavaScript 只 是 基于 对 象 的 客户 端 脚本 语言 。JScript 是 
由 微软 公司 开发 的 另 一 种 活动 脚本 语言 ， 与 JavaScript 并 无 本 质 的 关联 。 


10.1.1 JavaScript 的 语言 特点 


JavaScript 是 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚本 语言 。 可 以 使 用 JavaScript 并 
结合 HTML 语言 ,Java 语言 小 程序 一 起 在 Web 页 中 连接 多 个 对 象 , 实现 交互 效果 。JavaScript 
具有 以 下 几 个 特点 。 

1. 是 一 种 解释 执行 的 脚本 语言 

JavaScript 是 一 种 客户 端 执行 的 脚本 语言 , 采用 小 程序 段 式 的 编程 方式 。 与 其 他 的 脚本 
语言 一 样 ，JavaScript 是 一 种 解释 型 的 语言 ,不 用 预先 经 过 编译 ,而 是 在 程序 运行 过 程 中 被 
逐 行 解 释 执行 。 

2， 基 于 对 象 

JavaScript 是 一 种 基于 对 象 的 语言 , 可 以 使 用 已 经 创建 的 对 象 , 但 是 它 与 面向 对 象 的 语 
言 不 同 。JavaScript 只 能 使 用 已 经 定义 好 的 对 象 或 已 创建 好 的 对 象 ， 并 不 支持 类 的 继承 和 重 
载 等 。 在 JavaScript 中 ， 有 许多 功能 来 自 于 对 象 的 方法 与 脚本 的 相互 作用 。 

3. 简单 、 弱 类 型 

JavaScript 的 语法 类 似 于 C、Java 语言 ， 是 基本 语句 和 控制 语句 的 简单 而 紧凑 的 设计 。 
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JavaScript 是 弱 类 型 的 脚本 语言 , 变量 不 经 声明 即 可 以 使 用 , 也 并 没有 使 用 严格 的 数据 类 型 。 
4. 相对 安全 
JavaScript 是 一 种 相对 安全 的 脚本 语言 , 它 不 允许 脚本 访问 本 地 硬盘 , 也 不 能 将 数据 存 

入 服务 器 ， 不 允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 的 浏览 和 交互 ， 

可 以 有 效 地 防止 数据 的 丢失 。 

5. 动态 性 

使 用 JavaScript 可 以 实现 一 些 与 服务 器 无 关 的 动态 交互 效果 ， 可 以 直接 对 用 户 或 客户 
的 输入 做 出 响应 。JavaScript 采用 事件 驱动 的 方式 进行 , HTML 中 控件 的 相关 事件 被 触发 时 
可 以 自动 执行 JavaScript 脚本 或 函数 。 

6. 只 需要 浏览 器 支持 

JavaScript 的 运行 只 需要 客户 端 浏览 器 的 支持 。 目 前 , 几乎 所 有 的 客户 端 浏览 器 都 支持 
JavaScript。 如 果 客 户 端的 浏览 器 不 支持 JavaScript 或 用 户 禁 用 JavaScript， 那 么 浏览 器 在 运 
行 HTML 页 面 时 会 忽略 JavaScript。 

7. 嵌 套 在 HTML 中 

JavaScript 可 以 通过 引用 或 嵌 套 的 方式 插入 到 HTML 中 ，JavaScript 可 以 弥补 HTML 
的 缺陷 。JavaScript 中 的 大 部 分 对 象 都 与 HTML 中 的 标签 相对 应 ， 只 有 当 HTML 文档 执行 
时 ，JavaScript 才 会 被 执行 。 


10.1.2 JavaScript 的 基本 结构 


JavaScript 加 入 到 网 页 中 有 两 种 方法 : 直接 加 入 到 HTML 文档 中 ， 或 者 引用 到 HIML 
文档 中 。 

1. 使 用 <script> 标 签 直接 加 入 到 网 页 中 

将 JavaScript 脚本 直接 加 入 到 网 页 中 是 最 常用 的 方法 ， 例 如 : 

<script type="text/javascript"> 

= 

JavaScript 语句 
--> 
</script> 


W3C 建议 使 用 新 的 标准 <script type="text/javascript">, 不 推荐 使 用 language 属性 。<!-- 
和 --> 是 使 不 支持 JavaScript 脚本 的 浏览 器 忽略 JavaScript 脚本 。 本 书后 续 的 代码 中 全 部 省 
略 了 <!-- 和 -->。 由 于 几乎 所 有 的 浏览 器 的 默认 的 脚本 语言 都 是 JavaScript， 因 此 也 可 以 直接 
使 用 <script></scrip 亿 标签 引用 JavaScript 脚本 。 从 理论 上 讲 ，JavaScript 脚本 可 以 插入 到 
HTML 文档 的 任何 部 分 。 放 置 在 body 部 分 的 脚本 当 浏览 器 载 入 网 页 的 时 候 ， 就 会 执行 。 
例如 ，jsl.html。 

jslital; 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 插 入 到 body 的 Javascript</title> 
</head> 
<body> 
<script type="text/javascript"> 
document .write ("欢迎 学 习 Web 编程 基础 ! "); 
</script> 
</body> 


</html> 


jsl.html 的 显示 结果 如 图 10-1 所 示 。 


C 合 |0 1270018. 


欢迎 学 习 Web 编 程 基础 ! 


图 10-1 js1.html 的 显示 结果 


document 对 象 的 内 容 将 会 在 后 续 章节 中 介绍 。 

如 果 是 不 需要 一 载 入 网 页 就 执行 的 脚本 ， 可 以 放置 在 head 部 分 ， 当 某 事件 被 触发 时 ， 
再 调用 相应 的 JavaScript 脚本 。 例 如 ，js2.html。 

js2 html; 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 插 入 到 head 的 Javascript</title> 
<script type="text/javascript"> 
function show() { 
alert ("我 是 警告 框 ! ") ; 
} 
</script> 
</head> 
<body> 
<input type="button" value=" 弹 出 警告 框 " onclick="show()" /> 
</body> 


</html> 


js2.html 在 浏览 器 中 执行 后 ， 显 示 结 果 如 图 10-2 所 示 ， 单 击 “ 弹 出 警告 框 ”按钮 后 的 
显示 结果 如 图 10-3 所 示 。 
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Message from webpa... 


/ D 括 A 到 head 的 x 人 
C 合 |@ 1270018.， 廊 | : 全 我 是 警告 框 ! 


弹出 雪 洁 入 


图 10-2 js2.html 的 显示 结果 图 10-3 弹出 的 警告 框 


alert 是 window 对 象 的 方法 ，window 对 象 的 内 容 将 会 在 后 续 章 节 中 介绍 。 

2. 将 脚本 引用 到 HTML 文件 中 

对 于 较 长 或 复 用 性 较 高 的 JavaScript 脚本 ， 可 以 将 其 保存 成 扩展 名 为 js 的 文件 ， 然 后 
在 HIML 文件 中 进行 引用 。 例 如 ，hellojs 以 及 js3.html。 

hello.js: 


document .write ("欢迎 学 习 web 编程 基础 ! ") ; 


js3.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta. charset="UTF-8"> 
<title> 引 用 外 部 JS 文件 </title> 
</head> 
<body> 
<script type="text/javascript" src="js/hello.js"></script> 
</body> 
</html> 


js3.html 的 显示 结果 如 图 10-1 所 示 。 在 引用 外 部 的 JavaScript 文件 时 ， 为 了 避免 中 文 
乱码 问题 ， 应 将 引用 的 JavaScript 文件 和 引用 JavaScript 的 HTML 文件 的 编码 统一 设置 成 
支持 中 文 的 编码 ， 或 者 在 引入 JavaScript 时 ， 指 明 支 持 中 文 的 编码 ， 例 如 ，<script 
type="text/Javascript" src="js/hello.js" charset="utf-8"></script>。 

相 比 于 其 他 使 用 JavaScript 脚本 的 方式 ,引用 外 部 JavaScript 文件 有 许多 优势 。 可 以 更 
好 地 利用 代码 的 复 用 , 减少 代码 的 见 余 ,而 且 容 易 维护 ， 如 果 需 要 修改 JavaScript， 只 需要 
修改 外 部 的 JavaScript 文件 ， 不 需要 修改 引用 JavaScript 的 HTML 文件 。 


(02 JavaScript 语法 


与 其 他 语言 类 似 ，JavaScript 也 有 其 自身 的 数据 类 型 、 表 达 式 以 及 流程 控制 语句 。 
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JavaScript 的 语法 与 Java 有 些 类 似 。 


10.2.1 


数据 类 型 


JavaScript 是 弱 类 型 的 脚本 语言 , 变量 不 经 声明 即 可 使 用 , 在 使 用 的 过 程 中 也 可 以 更 改 


数据 类 型 。 


JavaScript 中 支持 的 数据 类 型 如 表 10-1 所 示 。 
表 10-1 JavaScript 的 数据 类 型 


数据 类 型 说 明 

布尔 类 型 true 或 false 

字符 申 类 型 以 单 引号 或 双 引 号 括 起 来 的 0 个 或 多 个 字符 

数值 类 型 以 浮 点 型 表示 整 型 和 浮 点 型 数据 

函数 类 型 一 种 特殊 的 对 象 数 据 类 型 ， 可 作为 参数 传递 

null 空 值 ， 与 0 不 同 

对 象 类 型 一 组 数据 和 功能 的 集合 ， 例 如 String、Date、Math 等 
Undefined 未 声明 ， 未 赋值 ， 或 者 使 用 了 并 不 存在 的 属性 
10.2.2 常量 


常量 指 的 是 一 旦 经 过 赋值 就 不 能 改变 的 值 ，JavaScript 中 的 常量 包括 以 下 几 种 类 型 


又 称 为 字面 值 ， 不 能 改变 的 数据 ， 可 以 使 用 十 六 进 制 、 八 进 制 或 十 进 


制 表 示 其 值 ， 例 如 0x3AF; 


浮 点 


布尔 


型 常量 一 一 由 整数 部 分 和 小 数 部 分 组 成 ， 例 如 13.567; 


量 一 一 只 有 两 种 状态 ， 即 true 或 false; 


空 值 一 一 null 表示 空 值 ， 无 值 ; 
特殊 字符 一 一 在 JavaScrip 中 以 “/” 开 头 的 不 可 显示 的 特殊 字符 ， 一 般 为 控制 字符 。 


10.2.3 变量 


。 字符 串 常量 一 由 单 引号 或 双 引 号 括 起 来 的 若干 个 字符 ， 引 号 不 能 恢 套 ; 


变量 指 的 是 程序 中 已 经 命名 的 存储 单元 ， 在 程序 的 执行 过 程 中 ， 可 以 修改 其 中 的 值 ， 
主要 作用 是 为 数据 提供 临时 的 存储 空间 。 

1. 变量 的 命名 

JavaScript 中 变量 的 命名 规则 与 其 他 语言 类 似 ， 需 要 遵循 以 下 规则 : 

。 变量 名 必须 以 字母 或 下 夯 线 开头 ， 后 面 可 以 是 数字 、 字 母 或 下 夯 线 ; 

。 变量 名 中 不 能 包含 不 允许 使 用 的 特殊 字符 ， 例 如 空格 及 用 于 定义 运算 符 的 符号 等 ; 

。 变量 名 严格 匹 分 大 小 写 ; 

。 变量 名 不 能 使 用 关键 字 或 保留 字 ; 

。 变量 名 最 好 包含 变量 的 类 型 信息 。 

JavaScript 中 的 关键 字 如 表 10-2 所 示 ， 保 留 字 如 表 10-3 所 示 。 
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SN 


break 
delete 
function 
Teturm 
typeof 


abstract 
const 
extends 
import 
package 
static 
volatile 
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表 10-2 ” JavaScript 中 的 关键 字 


case catch continue default 
do case finally for 

下 In instanceof new 
switch this throw try 

Var void while with 


表 10-3 ”JavaScript 中 的 保留 字 


boolean byte char class 
debugger double enum export 
final float goto implements 
int interface long native 
private protected public short 

super synchronized throws transient 


2. 变量 的 声明 
使 用 var 关键 字 声明 变量 ， 例 如 : 


Var V17 


多 个 变量 之 间 使 用 逗号 分 隔 ， 例 如 : 
Var vl, v2; 

也 可 以 在 声明 的 同时 ， 进 行 赋值 ， 例 如 : 
var vl = 3, v2; 
JavaScript 的 语句 结尾 处 可 以 加 分 号 , 已 加 分 号 的 多 条 语句 可 以 位 于 同一 行 上 ; 如 果 每 

条 语句 都 独占 一 行 ， 那 么 结尾 处 的 分 号 也 可 以 省 略 。 例 如 : 


Var vl 


Var V2 = 


每 


为 了 使 脚本 可 读 性 较 好 ， 一 般 不 建议 省 略 分 号 。 
3. 变量 的 类 型 
JavaScript 是 弱 类 型 的 脚本 语言 , 变量 声明 时 可 以 不 指定 变量 类 型 ,而 且 在 使 用 的 过 程 
中 也 可 以 随时 更 改变 量 的 类 型 。 例 如 : 


var LE hello 


Vl= 356; 


先 为 v1 赋值 一 个 字符 串 类 型 的 值 ， 然 后 又 为 vl 赋值 数值 类 型 的 值 ， 这 种 使 用 方法 在 
JavaScript 中 是 允许 的 。 
4. 变量 的 作用 域 


变量 的 作 | 


域 指 的 是 变量 的 有 效 范 


1) 全 局 变量 
全 局 变量 指 的 是 在 函数 之 外 声明 的 变量 ， 其 作用 范围 是 从 变量 定义 之 处 开始 ， 直 至 全 


围 ，JavaScript 中 的 变量 分 为 全 局 变量 和 局 部 变量 。 
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部 的 脚本 结束 ， 包 括 其 后 的 文档 ， 函 数 ， 脚 本 等 。 例 如 ，js4.html。 


Js4 


-html: 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-=8"> 
<title> 全 局 变量 </title> 


</head> 
<body> 


<script type="text/javascript"> 
Var g = "Hello!" 
document .write ("函数 外 访问 全 局 变量 : g=" + g + "<br />"); 
function my() { 
document .write ("函数 内 访问 全 局 变量 : g=" + g + "<br />"); 
} 
// 调 用 函数 
my () 7 
</script> 


</body> 
</html> 


js4.html 的 显示 结果 如 图 10-4 所 示 。 


口 全 局 变量 x\ 
| CGC 合 |© 127.00.1:80 


数 外 访问 全 局 变量 ，g=Hello! 
数 内 访问 全 局 变量 ，g=Hello! 


图 10-4 js4.html 的 显示 结果 


2) 局 部 变量 


就 
司 日 


变量 指 的 是 在 函数 内 部 声明 的 变量 ， 其 作用 范围 是 从 声明 之 处 开始 ， 至 本 函数 结 


束 。 如 果 在 函数 内 部 的 局 部 变量 和 函数 外 部 的 全 局 变量 重 名 ， 那 么 函数 内 使 用 变量 时 ， 会 


优先 使 用 局 部 变量 ， 即 在 函数 内 部 ， 局 部 变量 的 优先 级 要 高 于 同名 的 全 局 变量 ， 例 如 ， 
js5_html。 
js5.html: 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
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<title> 全 局 变量 和 局 部 变量 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var Y= "Global Hello"s 
function my() { 
Var V = "Local Hello™"; 
document .write ("函数 内 访问 v=" + V + "<br />"); 
V = "Changed Local Hello"; 
document .write ("函数 内 访问 更 改 之 后 的 v=" + Vv + "<br />") 7 
1 
document .write ("函数 外 访问 v=" + v + "<br />"); 
my (); 
document .write ("函数 外 访问 v=" + v + "<br />"); 
</script> 
</body> 
</html> 


js5.html 的 显示 结果 如 图 10-5 所 示 。 

可 见 ， 在 函数 内 更 改变 量 的 值 时 ， 也 导致 了 全 局 变量 值 的 变化 。 实 际 上 ， 在 函数 内 部 
声明 变量 时 由 于 没有 使 用 关键 字 var， 不 能 作为 声明 新 的 局 部 变量 ， 而 认为 是 对 全 局 变量 
的 修改 或 者 是 声明 全 局 变量 。 一 般 情 况 下 ， 函 数 并 不 知道 全 局 变量 作用 域 中 定义 的 变量 。 
如 果 函 数 使 用 的 是 全 局 变量 ， 而 不 是 局 部 变量 ， 那 么 可 能 改变 程序 其 他 部 分 所 依赖 的 全 局 
变量 的 值 。 因 此 ， 要 正确 地 使 用 局 部 变量 ， 必 须 在 其 声明 时 加 上 关键 字 var， 而 声明 全 局 
变量 时 ， 可 以 省 略 var 关键 字 。 为 了 避免 不 必要 的 麻烦 ， 建 议 在 声明 变量 时 ， 不 论 声明 的 
是 全 局 变量 ， 还 是 局 部 变量 ， 都 要 加 上 关键 字 var。 在 js5.html 中 ， 如 果 在 函数 内 声明 v 时 
加 上 关键 字 var， 则 其 显示 结果 如 图 10-6 所 示 ， 局 部 变量 的 使 用 没有 影响 到 全 局 变量 。 

EYE 
/ 中 全 局 交 是 和 局 部 交 量 x > 


| C |© 127.00.1:8020/ch.. 父 


/中 全 局 二 局 部 训 量 
C OO | 127001:8020/ch10j.. 会 


函数 外 访问 v=Global Hello 
函数 内 访问 v=Local Hello 
函数 内 访问 更 改 之 后 的 v=Changed Local Hello 


函数 外 访问 v=Gilobal Hello 
函数 内 访问 v=Local Hello 
函数 内 访问 更 改 之 后 的 v=Changed Local Hello 


函数 外 访问 v=Changed Local Hello 函数 外 访问 v=Global Hello 
10-5 js5.html 的 显示 结果 图 10-6 更改 之 后 的 js5.html 的 显示 结果 


10.2.4 注释 


JavaScript 中 添加 注释 的 方法 类 似 于 Java 语言 ， 可 以 通过 “/” 添 加 单行 注释 ， 也 可 以 
通过 “/*” 以 及 “*/” 添 加 多 行 注释 。 在 多 行 注释 中 可 以 风 套 单行 注释 ， 但 是 单行 注释 中 
不 能 嵌 套 多 行 注 释 。 注 释 内 容 在 HTML 文件 执行 时 会 被 忽略 ,可 以 通过 在 浏览 器 中 查看 源 
代码 查看 。 
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10.2.5 “运算 符 


JavaScript 的 运算 符 包括 赋值 运算 符 、 算 术 运 算 符 、 比 较 运 算 符 、 逻 辑 运算 符 、 条 件 运 
算 符 、 位 移 运算 符 以 及 字符 串 运 算 符 。 
1. 赋值 运算 符 
赋值 运算 符 用 于 为 变量 赋值 ，JavaScript 的 赋值 运算 符 如 表 10-4 所 示 。 
表 10-4 JavaScript 的 赋值 运算 符 


赋值 运算 符 说 明 

= 普通 赋值 ， 将 右边 的 值 赋值 给 左边 的 变量 

二 自 加 

一 自 减 

= 自 乘 

= 自 除 

%= 自 取 模 

<<= 自 左 移 一 位 

>>= 自 右 移 一 位 

= 自 或 运算 

&= 自 与 运算 
2. 算术 运算 符 


算术 运算 符 主要 用 于 进行 数值 运算 , 例如 加 、 减 、 乘 、 除 、 加 1、 减 1 等 运算 。JavaScript 
的 算术 运算 符 如 表 10-5 所 示 。 
表 10-5 JavaScript 的 算术 运算 符 


算术 运算 符 说 明 
十 两 个 数 相 加 
- 两 个 数 相 减 
村 两 个 数 相 乘 
两 个 数 相 除 
% 取 模 
+ 递增 加 或 加 1 
-- 递增 减 或 减 1 
3， 比较 运算 符 


比较 运算 符 用 于 将 两 个 数值 、 字 符 串 或 者 逻辑 变量 按照 一 定 的 规则 进行 比较 ， 并 以 逻 
辑 值 (true 或 false) 来 表示 比较 结果 。JavaScript 的 比较 运算 符 如 表 10-6 所 示 。 
表 10-6 JavaScript 的 比较 运算 符 


比较 运算 符 说 明 

< 比较 左边 的 值 是 否 小 于 右边 的 值 

> 比较 左边 的 值 是 否 大 于 右边 的 值 

二 比较 左边 的 值 是 否 小 于 或 等 于 右边 的 值 
= 比较 左边 的 值 是 否 大 于 或 等 于 右边 的 值 


== 比较 左右 两 边 的 值 是 否 相等 
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续 表 
比较 运算 符 说 明 
=== 比较 左右 两 边 的 值 是 否 严格 相等 
= 比较 左右 两 边 的 值 是 否 不 相等 
!== 比较 左右 两 边 的 值 是 否 严格 不 相等 
其 中 ,“= =” 指 的 是 值 是 否 相 等 ， 在 比较 之 前 会 先进 行 类 型 转换 ， 如 果 类 型 转换 后 值 
相等 的 话 ， 会 返回 tue， 和 否则 会 返回 false。“= = =” 在 比较 之 前 不 会 进行 类 型 转换 ， 如 果 


不 是 同一 类 型 ， 则 返回 false; 如 果 是 同一 类 型 ， 但 值 不 相等 ， 则 返回 false; 如 果 是 同一 类 
型 ， 并 且 值 也 相等 ， 则 返回 tue。 二 者 的 使 用 示例 可 参照 js6.html。 
js6.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 相 等 与 严格 相等 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var x = 265; 
Var y = "265"s 
Var z = 265; 
document .write ("265==&quot;265&quot; 的 结果 是 : "+ (x 二 y) + "<br />"); 
document .write ("265= 一 &gquot;265&quot; 的 结果 是 : "+ (x ===y) + "<br />"); 
document .write ("265===265 的 结果 为 : " + (x === 2z) + "<br />"); 
</script> 
</body> 
</html> 


js6.html 的 显示 结果 如 图 10-7 所 示 。 


le 
口 相等 SF 属相 等 x 人 


| GC 合 10 127.00.1:80.， 廊 


265 一 "265" 的 结果 是 :tme 
265 一 ="265" 的 结果 是 ，false 
265 一 =265 的 结果 为 :true 


图 10-7 js6.html 的 显示 结果 


4. 逻辑 运算 符 
逻辑 运算 符 主要 用 于 表达 式 运 算 ， 其 操作 数 和 返回 值 都 是 逻辑 值 ， 如 表 10-7 所 示 。 
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表 10-7 JavaScript 的 逻辑 运算 符 


逻辑 运算 符 说 明 
&& 逻辑 与 运算 ， 左 右 两 边 都 为 tue 时 ， 返 回 true; 否则 返回 false 
逻辑 或 运算 ， 左 右 两 边 都 为 false 时 ， 返 回 false; 否则 返回 true 


| 
! 逻辑 非 ， 当 操作 数 为 tue 时 ， 返 回 false; 当 操 作 数 为 false 时 ， 返 回 true 


5. 条 件 运算 符 

JavaScript 的 条 件 运算 符 是 三 目 运算 符 ， 是 根据 条 件 执行 两 个 语句 中 的 一 个 ， 使 用 方 
法 为 : 

condition ? 语句 1: 语句 2; 
如 果 condition 成 立 ， 则 执行 语句 1; 如 果 condition 不 成 立 ， 则 执行 语句 2。 条 件 运 算 符 的 
使 用 示例 可 参照 js7.html。 

js7.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 条 件 运算 符 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var n = window .prompt ("请 输入 成 绩 : (0-100) "); 
Var s = parseInt (n); 
Var r = s >= 60 ? "恭喜 你 及 格 了 ! " : "你 没有 及 格 或 者 输入 的 数据 不 合法 ! "; 
alert (r); 
</script> 
</body> 
</html> 


在 浏览 器 中 执行 js7.html， 输 入 符合 要 求 的 数值 ， 会 给 出 相应 的 提示 。 

6. 位 移 运 算 符 

JavaScript 的 位 移 运 算 符 包 插 |、&&、<<、>>、~、^、>>>、<<< 等 ， 其 中 ，>>> 以 及 <<< 
指 的 是 无 符号 位 移 运 算 符 。 

7. 字符 串 运 算 符 

可 使 用 “+” 实 现 数值 类 型 的 相 加 运算 ， 也 可 以 使 用 “+” 来 连接 字符 串 ， 如 果 一 个 表 
达 式 中 既 有 数值 也 有 字符 串 ， 则 表达 式 从 左 到 右 进行 判断 ， 一 旦 出 现 字符 串 ， 则 后 续 的 操 
作 符 都 被 认为 是 字符 串 进行 连接 。 例 如 ，js8.html。 

js8 .html: 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 运 算 符 + 的 使 用 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var Sl = 3 aT 
a2 
wap Sd 
WAP Sd = 二 和 a 4 SF 
WE 
document .write ("3+4+5+6=" + S1 + "<br />"); 
document .write ("3+4+5+&quot; 6&quot;=" + 52 + "<br />"); 
document .write ("3+4+&quot;5&quot;+&quot; 6&quot;=" + s3+ "<br />"); 
document .write ("3+&quot; 4&quot;+5+6=" + s4 + "<br />"); 
document .write ("gquot;3&quot;+4+5+6=" + 55 + "<br />"); 
</script> 
</body> 
</html> 


js8.html 的 显示 结果 如 图 10-8 所 示 。 


les 


/ 口 运算 符 + 的 使 请 X ‘= 
GC 全 |©127.0018.. 人 女 

3+4+5+6=18 

3+4+5+"6"=126 

3+4+"5"+"6"=756 


3+"4"+5+6=3456 
"3"+4+5+6=3456 


图 10-8 js8.html 的 显示 结果 


JavaScript 中 的 运算 符 较 多 ， 各 种 运算 符 的 优先 级 如 表 10-8 所 示 。 
表 10-8 JavaScript 运算 符 的 优先 级 


运算 符 说 明 

| 字段 访问 、 数 组 下 标 、 函 数 调用 及 表达 式 分 组 

++、--、~、!、delete、new、typeof、void ” 自 增 、 自 减 、 按 位 非 、 逻 辑 非 、 删 除 对 象 、 创 建 对 象 、 返 回 
类 型 、 未 定义 值 

*、/、 % 乘 、 除 、 取 模 

十 、 一 、 十 加 、 减 、 字 符 串 连接 

XE, SP Po 移 位 

<、<=、>、>=、instanceof 小 于 、 小 于 等 于 、 大 于 、 大 于 等 于 、 类 型 判断 


一 、! 一 等 于 、 不 等 于 、 严 格 相等 、 非 严格 相等 
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续 表 

运算 符 说 明 
& 按 位 与 
» 按 位 异 或 
| 按 位 或 
&& 逻辑 与 
| 逻辑 或 
iy 条 件 
= 赋值 

多 重 求 值 


10.2.6 流程 控制 


JavaScript 通过 流程 控制 语句 来 执行 程序 流 ， 程 序 流 由 若干 语句 组 成 。 正 常情 况 下 , 程 
序 中 的 语句 是 按照 书写 顺序 执行 的 ， 这 种 结构 称 为 顺序 结构 。 除 了 顺序 结构 之 外 ， 在 程序 
设计 语言 中 还 有 选择 结构 和 循环 结构 。 

1. 选择 结构 

选择 结构 也 可 以 称 为 条 件 -分 支 结构 ,根据 条 件 的 成 立 与 否 ， 执行 相应 的 语句 结构 。 在 
JavaScript 中 提供 了 两 种 选择 结构 语句 ，if-else 语句 和 switch 语句 。 

1) if-else 语句 

让 else 语句 有 3 种 格式 。 第 一 种 格式 为 : 

if(condition){ 

statements; 
} 


如 果 condition 成 立 ， 则 执行 statements 语句 ， 否 则 不 执行 。condition 一 般 是 条 件 表 达 式 ， 
可 以 返回 true 或 false 值 。 
第 二 种 格式 为 : 


if(condition){ 


statements]l; 
} 
elsef 
statements2; 
} 


如 果 condition 成 立 ， 则 执行 statements1 语句 ， 否 则 执行 statements2 语句 。 
第 三 种 格式 为 : 


if(conditionl){ 
statements1; 

} 

else if(condition2){ 


statements2; 


oA 
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} 
else if(condition3){ 


statements3; 


elsel{ 
statements4; 
} 


如 果 conditionl 成 立 ， 则 执行 statements1 语句 ; 如 果 condition2 成 立 ， 则 执行 statements2 
语句 ， 如 果 condition3 成 立 ， 则 执行 statements3 语句 ， 如 果 上 述 条 件 都 不 成 立 ， 则 执行 
statements4 语句 。if-else 语句 的 使 用 示例 可 参照 js9.html。 

js9.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 选 择 结构 </title> 
<script type="text/javascript"> 
function max() { 
Var first = parseInt (forml.first.value); 
var second = parseInt (forml.second.value); 
if(isNaN(first)) { 
alert ("第 一 个 数 不 是 数值 类 型 1") ; 
forml .first.value = ""; 
} else if(isNaN(second)) { 
alert ("第 二 个 数 不 是 数值 类 型 1") ; 
forml.second.value = ""; 
} else { 
var max = (first >= second ? first : second); 


document .write ("两 个 数 之 间 较 大 的 数 为 : " + max) ; 


} 
</script> 
</head> 
<body> 
<form name="forml"> 请 输入 第 一 个 数 〈 数 值 类 型 ): <input type="text" name= 
"first" /><br /> 请 输入 第 二 个 数 ( 数 值 类 型 ): 
<input type="text" name="second" /><br /> 
<input type="button" onclick="max()"” value=" 选 择 较 大 值 " />&gnbsp; 
&nbsp7 
<input type="reset" value=" 重 填 " /></form> 
</body> 
</html> 
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在 浏览 器 中 运行 js9.html， 并 输入 合法 的 数据 ， 可 以 选择 出 较 大 的 值 ， 如 果 输 入 的 数 
据 不 以 数字 开头 ,会 提示 输入 的 值 不 是 数值 类 型 .if-else 语句 允许 榜 套 , 即 可 以 将 一 个 felse 
语句 作为 男 一 个 于 else 语句 的 一 条 语句 来 使 用 ， 例 如 ，js10.html。 

js10.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 判 断 年 份 是 不 是 头 年 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var str = prompt ("请 输入 一 个 年 份 "，""); 
Var year = parseInt (str); 
if(isNaN(year)) { 
alert ("年 份 必须 数值 ! ") ; 
} else { 
if(year %$ 100 == 0) { 
if(year % 400 == 0) { 
document .write (year + "是 闽 年 ! "); 
} else { 
document .write (year + "不 是 半年 ! "); 
} 
} else if(year sgs 4 == 0) { 
document .write (year + "是 闺 年 ! "); 
} else { 
document .write (year + "不 是 头 年 ! "); 


} 
</script> 
</body> 
</html> 


在 浏览 器 中 运行 js10.html， 并 输入 2012， 显 示 的 结果 如 图 10-9 所 示 。 
“ek 


口 判 #f 年 份 &FE x \ 
C 合 10O 1270018.， 女 


2012 是 头 年 ! 


10-9 js10.html 的 显示 结果 
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2) switch 语句 

JavaScript 还 提供 了 另 一 种 选择 结构 switch 语句 。switch 语句 可 以 从 多 种 情况 中 选择 一 
种 情况 ， 执 行 对 应 的 语句 。switch 语句 可 以 由 直 else 语句 来 完成 ， 但 是 switch 语句 的 结构 
更 清晰 ， 可 读 性 好 ， 便 于 维护 。switch 语句 由 一 个 控制 表达 式 和 若干 个 case 表述 的 语句 组 
成 ， 其 语法 如 下 : 


switch (expression){ 


Case valuel: 
statements1; 
break; 

case Value2: 
statements2; 


break; 


case valueN: 
statementsN; 
break; 

[default: 
defaultstatements;] 

} 


switch 语句 把 表达 式 的 返回 值 与 case 子 句 中 的 值 进行 比较 ,一旦 匹配 ， 便 执行 对 应 的 
case 语句 之 后 的 所 有 语句 ， 一 直到 遇 到 break 为 止 。 如 果 没 有 break 语句 ,会 执行 到 default 
之 前 。 如 果 多 个 case 需要 执行 同样 的 语句 , 可 以 在 一 个 case 子 句 中 使 用 逗号 分 隔 表达 式 的 
值 ， 也 可 以 多 个 case 子 句 使 用 一 个 statements 子 句 ，case 之 间 不 需要 加 break。expression 
表达 式 的 值 可 以 是 任意 的 数据 类 型 ,例如 数值 类 型 、 字 符 串 类 型 、 布 尔 类 型 或 是 对 象 类 型 。 
但 是 各 个 case 子 句 的 值 应 该 是 互 不 相同 的 。default 子 句 是 可 选 的 , 如 果 所 有 的 case 子 句 都 
不 执行 ， 会 执行 default 子 句 。switch 语句 的 使 用 示例 可 参照 js11.html。 

jsll html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>switch 语句 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var day = new Date() .getDay(); 
switch(day) { 
Case 0: 
title = "今天 是 星期 日 ! "; 


break; 


case 1: 
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titTe ?今天 是 星期 1 ”> 
break; 

Case 2: 
title = "今天 是 星期 二 ! "; 
break; 

case 3 
title; = "今天 是 星期 三 1 "7 
break; 

case 4: 
title = "今天 是 星期 四 ! "; 
break; 

case 5 
title = "今天 是 星期 五 ! "; 
break; 

default: 
title = "今天 是 星期 六 ! " 

} 
document .write (title); 
</script> 
</body> 
</html> 


jsll.html 的 显示 结果 如 图 10-10 所 示 。 
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今天 是 星期 四 ! 


图 10-10 js11.html 的 显示 结果 


2. 循环 结构 

循环 结构 也 称 为 迭代 结构 ， 可 以 使 语句 反复 执行 指定 的 次 数 ， 或 者 使 语句 反复 执行 直 
到 满足 指定 的 条 件 为 止 。JavaScript 中 提供 的 循环 结构 有 以 下 4 种 : 

。 for 语句 ; 

。 for-in 语句 ; 

。 while 语句 ; 

。 do-while 语句 。 

1) for 语句 

for 语句 是 最 常用 的 循环 语句 , 一 般 用 于 已 知 语句 重复 执行 的 次 数 的 情况 ,其 语法 结构 
如 下 : 
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for (initial-condition; condition; increment){ 
statements; 
} 


其 中 ， 

。 initial-condition 指 的 是 初始 化 操作 ， 一 般 为 给 计数 器 赋 初 值 ; 

se condition 指 的 是 statements 语句 执行 的 条 件 ， 如 果 condition 成 立 ， 则 statements 执 

行 ， 否 则 statements 不 执行 ; 

。 increment 为 增 量 语句 ， 指 的 是 两 次 循环 之 间 的 计数 器 的 变化 。 

for 语句 在 执行 时 ， 首 先 执行 initial-condition， 然 后 根据 condition 判断 是 否 执行 
statements, 如 果 不 执行 , 则 退出 for 语 句 ; 如 果 执 行 , 则 执行 完 statements 之 后 ,执行 increment 
语句 ， 再 根据 condition 判断 是 否 重复 执行 。 

initial-condition 允许 为 室 ， 表 示 没 有 初始 化 操作 ， 但 分 号 不 能 省 略 。condition 也 允许 
为 室 ， 分 号 不 能 省 略 ， 表 示 循 环 无 穷尽 执行 。increment 也 允许 为 空 ， 分 号 不 能 省 略 ， 表 示 
没有 增 量 语 句 ， 计 数 器 值 不 更 改 。 例 如 : 

for(; 7 7?) {.} 

initial-condition 以 及 increment 允许 为 用 有 逗号 分 隔 的 多 个 语句 ， 例 如 : 

for(int i=1，int j=2; i<50&&j<100; i=i+l, j=j+3) { statements; } 


注意 : for 循环 中 的 condition 条 件 与 其 他 语句 中 的 condition 条 件 类 似 ， 如 果 condition 
返回 的 值 为 null、 0、""、 false、undefined、NaN 时 ,不 执行 for 循环 的 语句 块 ; 如 果 condition 
返回 的 值 为 非 null 对 象 、true、 非 空 字符 串 时 ， 执 行 for 循环 的 语句 块 。 

for 语句 的 使 用 示例 可 参照 js12.html。 

js12.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 输 出 九 九 乘法 表 </title> 
</head> 
<body> 
<font size="-1" color="blue"> 
<script type="text/javascript"> 
YEE 33 
Eor(i = Ld < LORP TEEy 
For = LE 1 < 洒 
document .write(j + "*" + + "=" + i*]j); 
(Oy 到 
document .write ("gnbsp; &nbsp; "); 
} 
document .write ("gnbsp; &nbsp; "); 
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下 
document .write ("<br />"); 
</script> 
</font> 
</body> 
</html> 


js12.html 的 显示 结果 如 图 10-11 所 示 。 


_/ D 给 Hu 天 当 x 


GC OO |© 127.00.1:8020/chl0/jsl2.htmp_hbt=1.， 食 


2*3=6 3+*3=9 

2*4=8 3*4=12 4*4=16 

2*5=10 3*5=15 4*5=20 5*5=25 

2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 

2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 

2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 
2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81 


图 10-11 js12.html 的 显示 结果 


2) for-in 语句 

for-in 语句 用 于 遍历 数组 或 者 对 象 的 属性 ， 通 过 对 数组 或 者 对 象 的 属性 进行 循环 操作 
完成 。 其 语法 结构 如 下 : 

for (Element in Object){ 


statements; 
} 


一 般 不 要 使 用 for-in 语句 遍历 数组 ， 除 了 性 能 上 的 原因 之 外 ， 可 能 会 有 一 些 意料 不 到 
的 问题 Cbug), 建议 使 用 for 语句 遍历 数组 ,使 用 forin 语句 遍历 对 象 的 属性 ,例如 ,js13.html。 
Js13.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>for-in 遍历 对 象 的 属性 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var student = new Object(); 
student .name = " 王 明 明 "; 
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student .no = "20120156"; 
student .address = "山东 济南 "; 
student .mobile = "13612345678"™; 
for(e in student) { 
document .write(e + " : "+ student[e] + "<br />"); 
上 
</script> 
</body> 
</html> 


js13.html 的 显示 结果 如 图 10-12 所 示 。 
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7 forin 人 遍历 对 伟 X 
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name : 王 明 明 
no : 20120156 


address : 山东 济南 
mobile : 13612345678 


图 10-12 js13.html 的 显示 结果 


3) while 语句 

当 循 环 的 次 数 不 确定 时 ， 可 使 用 while 语句 或 者 do-while 语句 。while 语句 是 经 常 使 用 
的 循环 语句 ， 它 的 作用 是 当 某 条 件 满 足 时 ， 循 环 执行 一 段 代 码 ， 直 到 条 件 不 再 满足 为 止 。 
其 语法 结构 如 下 : 

while(condition){ 


statements; 
} 


首先 判断 condition 条 件 是 否 成 立 ， 如 果 成 立 ， 则 循环 执行 statements; 和 否则 结束 while 
循环 ,执行 while 语句 之 后 的 语句 。 例 如 ，js14.html， 使 用 while 语句 输出 1 一 100 之 间 的 3 
的 倍数 。 

js14.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>while 语句 -输出 1~100 的 3 的 倍数 </title> 
</head> 
<body> 
<script type="text/javascript"> 


Var i = 17 
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Var k= 0; 
while(i <= 100) { 
if(i % 3 == 0) { 
document .write(i + "gnbsp;&nbsp; Enbsp;"); 
K++; 
TF 5 0) 
document .write ("<br />"); 


小 
了 + 二 
} 
</SCriDE> 
</body> 
</html> 


js14.html 的 显示 结果 如 图 10-13 所 示 。 
加 下 


7 while 语 句 输出 ~ x WW 


GC 合 |@127.00.1:8020/.. 人 女 


图 10-13 js14.html 的 显示 结果 


4) do-while 语句 
do-while 语句 和 while 语句 类 似 ， 其 语法 结构 如 下 : 
dof 


statements; 
} while (condition); 


首先 ，do-while 语句 执行 一 次 statements， 然 后 判断 condition 是 否 成 立 。 如 果 成 立 ， 则 循 
环 执行 statements; 如 果 不 成 立 ， 则 结束 do-while 语句 ， 执 行 其 后 的 语句 。 
在 do-while 语句 中 , 不论 condition 是 否 成 立 , statements 都 至 少 会 执行 一 次 。 但 在 while 
语句 中 ，statements 可 能 一 次 也 不 会 执行 。do-while 的 使 用 示例 可 参照 js15.html。 
js15.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
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~ 


Web 编程 基础 一 一 HTML5、CSS3、JavaScript (第 2 版 ) 


<title> 使 用 do-while 计算 1 一 100 的 和 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var i = 1; 
Var sum = 07 
do { 
Sum += i; 
i++? 
} while (i <= 100); 
document .write ("1 一 100 的 和 是 "+ sum); 
</script> 
</body> 
</html> 


js15.html 的 显示 结果 如 图 10-14 所 示 。 


四 使 用 do-while x 二 
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1~100 的 和 是 5050 


图 10-14 js15.html 的 显示 结果 


3. 转移 语句 

为 了 更 好 地 控制 程序 的 流程 ， 在 JavaScript 中 ， 除 了 提供 了 选择 结构 和 循环 结构 的 语 
句 之 外 ， 还 提供 了 转移 语句 ， 主 要 包括 break 语句 、continue 语句 和 retum 语句 。 

1) break 语句 

break 语句 可 用 于 switch 语句 和 for 语句 等 循环 语句 中 。 当 用 于 switch 语句 中 时 ， 中 止 
switch 语句 ， 执 行 switch 语句 后 的 语句 ;如 果 在 switch 语句 中 的 各 个 case 当中 没有 break 
语句 ， 则 某 一 case 成 立时 ， 其 后 所 有 的 case 也 会 执行 ， 所 以 在 switch 语句 中 ， 一 般 都 要 
使 用 break 语句 。 当 用 于 循环 语句 中 时 ， 中 止 循环 ， 跳 出 最 近 的 循环 语句 ， 执 行 循环 语句 
之 后 的 语句 。break 语句 的 使 用 示例 可 参照 js16.html。 

js16.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 寻 找 100 以 内 的 第 10 个 素数 </title> 
</head> 
<body> 
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<script type="text/javascript"> 
Var K = 0; 
Eola i 0 AR 
var flag = 0; 
Eom 
if(i Sj== 0) 1{ 
flag = 1; 
1} 
// 如 果 找到 除 1 和 本 身 之 外 的 公 因 子 ，i 不 是 素数 ， 不 用 再 判断 其 他 的 公 因子 
break; 
} 
if(flag == 0) { 
k++? 
' 
if(k == 10) { 
document .write ("100 以 内 的 第 10 个 素数 是 : ”+ i); 
// 找 到 第 10 个 素数 ， 不 用 再 判断 其 他 的 数 
break; 
} 
} 
< scripE> 
</body> 
</html> 


js16.html 的 显示 结果 如 图 10-15 所 示 。 


[Dy He100LArNi: x (CW 
C 个 10 127001:8.， 女 
100 以 内 的 第 10 个 素数 是 ，19 


10-15 js16.html 的 显示 结果 


2) continue 语句 
continue 语句 用 于 for、while、do-while、for-in 语句 中 ， 用 于 结束 本 次 循环 ， 忽 略 本 次 


循环 还 没有 执行 的 语句 ， 根 据 条 件 判断 确定 是 否 继 续 下 次 循环 ， 一 般 与 过 语句 一 起 使 用 。 
continue 语句 不 用 于 switch 语句 中 。 使 用 continue 语句 的 目的 是 简化 代码 ， 如 果 不 能 简化 
代码 ， 则 没有 必要 使 用 。continue 语句 的 使 用 示例 可 参照 js17.html。 

js17 html: 


<!DOCTYPE html> 
<html> 
<head> 
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<meta charset="UTF-8"> 
<title> 输 出 20 以 内 不 能 被 3、5、7 整除 的 整数 </title> 
</head> 
<body> 
<script type="text/javascript"> 
ForMvar i = 1 TL <= 207 L143) 
if(i %$ 3==0 |1|is%5==0 ||i%7==0)1{ 
continue; 
1 
document .write(i + "gnbsp;"); 
| 
</script> 
</body> 
</html> 


js17.html 的 显示 结果 如 图 10-16 所 示 。 


口 纺 H20DmTFE x \ 
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图 10-16 js17.html 的 显示 结果 


continue 语句 只 是 结束 本 次 循环 , 根据 条 件 判 断 确定 是 否 终 止 整个 循环 ; 而 break 语句 
是 结束 最 近 的 整个 循环 ， 不 再 进行 条 件 判 断 。 

3) retum 语句 

return 语句 一 般 在 函数 中 使 用 , 可 以 使 用 retum 表达 式 的 格式 返回 任意 类 型 的 函数 值 ， 
返回 的 函数 值 可 以 用 变量 接收 ， 相 关 示 例 可 参照 10.3.1 节 的 js21.html; 也 可 以 直接 使 用 
retum 语句 退出 函数 ， 但 不 返回 任何 类 型 的 值 ， 即 返回 null 类 型 的 值 。 在 大 多 数 情况 下 ， 
如 果 事件 处 理 函 数 返回 false， 可 以 防止 默认 的 事件 行为 。 例 如 ， 默 认 情 况 下 ， 当 单 击 一 个 a 
元 素 时 ， 页 面 会 跳 转 到 其 href 属性 指定 的 资源 ， 但 是 使 用 retum false 时 ， 不 会 跳 转 。 例 如 : 


<a _ href=".."” onclick="return false;"> 这 里 是 超级 链接 </a> 
return false 相当 于 终止 符 ， 而 returm true 就 相当 于 执行 符 。 可 以 结合 表单 验证 的 JavaScript 
代码 来 使 用 retum 语句 ， 例 如 ，js18.html。 

js18.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
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<title>return 用 于 检验 表单 </title> 
<script type="text/javascript"> 
function check() { 
if(forml.name.value == "") { 
alert ("用 户 名 不 能 为 空 ! "); 
return false; 
if(forml.password.value == "") { 
alert ("密码 不 能 为 空 ! ") ; 
return false; 


} 
</script> 
</head> 
<body> 
<form name="forml" action="js18 ok.jsp" method="post" onsubmit="return 
check();"> 
用 户 名 : <input type="text" name="name" /><br /> <br /> 密码 : 
<input type="password" name="password" /><br /><br /> 
<input type="submit" value=" 提 交 " />&gnbsp; &nbsp; 
<input type="reset" value=" 重 置 " /> 
</form> 
</body> 
</html> 


js18_ok.jsp: 


<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 显 示 用 户 名 和 密码 </title> 
</head> 
<body> 
用 户 名 : 
<%=request .getParameter ("name")%$><br /> 密码 : 
<%=request .getParameter ("password") ®%> 
</body> 
</html> 


以 本 机 为 服务 器 部 署 项 目 ch10， 以 http://localhost:8080/ch10/js18.html 的 方式 访问 
js18.html， 当 用 户 名 或 密码 为 空 时 ， 提 示 相 关 信 息 ， 表 单 不 提交 ; 如 果 用 户 名 和 密码 都 不 
为 空 ， 表 单 提交 给 js18_ok.jsp 处 理 ， 显 示 输入 的 信息 。 表 单 的 onsubmit="returm checkO" 不 
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能 替换 成 onsumbit-"eheck0"， 如 果 蔡 换 ， 即 使 用 户 输入 的 信息 不 能 通过 校 验 ， 表 单 仍然 会 
提交 。 因 为 表单 的 onsubmit 属性 会 默认 返回 tue。js18 .html 的 显示 结果 如 图 10-17 所 示 。 
提交 之 后 的 显示 结果 如 图 10-18 所 示 。 
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用 户 名 ，wangmingming 
密码 ， 123456 


提交 | [ 重 置 | 
图 10-17 js18.html 的 显示 结果 图 10-18 提交 之 后 的 显示 结果 


(os JavaScript 函数 


对 于 完成 一 些 特定 功能 的 脚本 ， 可 以 将 其 编写 为 一 个 函数 。 将 脚本 组 织 成 函数 ， 以 便 
于 代码 重复 利用 ， 另 外 ， 也 可 以 避免 函数 中 的 脚本 在 页 面 载 入 时 执行 ， 函 数 中 的 脚本 只 有 
在 事件 被 激活 或 者 函数 被 调用 时 才 会 执行 。 函 数 可 以 放置 在 页 面 的 任何 部 分 ， 通常 放 置 在 
<head> 部 分 ， 也 可 以 引用 外 部 的 JavaScript 文件 。 在 JavaScript 中 ， 函 数 分 成 内 置 函 数 和 用 
户 自 定义 函数 。 


10.3.1 内 置 函 数 
内 置 函数 是 JavaScript 中 已 经 定义 好 的 函数 ， 可 以 直接 使 用 。 内 置 函数 又 分 为 常用 函 
数 、 数 组 函数 、 日 期 函数 、 数 学 函数 、 字 符 串 函 数 。 其 中 ， 常 用 函数 如 表 10-9 所 示 。 
表 10-9 JavaScript 的 常用 内 置 函数 

函数 名 说 明 

alert 显示 一 个 警告 对 话 框 ， 包 括 一 个 OK 按钮 

confirm 显示 一 个 确认 对 话 框 ， 包 括 OK、Cancel 按钮 

prompt 显示 一 个 输入 对 话 框 ， 提 示 等 待 用 户 输入 

escape 将 字符 串 转换 成 Unicode 码 

eval 计算 表达 式 的 结果 

isNaN 判断 参数 是 否 不 是 数字 

parseFloat 将 字符 串 转换 成 浮 点 型 数值 

parseInt 将 字符 串 转换 成 整 型 数值 

Unescape 解码 由 escape 函数 编码 的 字符 


其 中 ，alert()、confirm()、prompt0 函 数 是 Window 对 象 的 方法 ，Window 对 象 将 在 后 续 
章节 中 讲解 。 其 他 函数 是 Global 对 象 的 函数 , 也 称 为 全 局 函数 。Global 对 象 称 为 全 局 对 象 ， 
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其 目的 是 为 了 将 全 局 函数 组 织 在 一 起 。 实 际 上 ，Global 对 象 从 不 直接 使 用 ， 不 能 使 用 new 


操作 符 来 创建 。 它 在 JavaScript 引擎 被 初始 化 时 创建 ， 


可 以 立即 使 用 。 内 置 函 数 中 的 其 他 几 种 函数 将 在 后 续 章 


1. alert 


alert 函数 用 于 弹出 消息 对 话 框 ， 通 常用 于 一 些 对 上 


alert (value); 


具有 属性 、 方 法 和 全 局 对 象 ， 并 且 
节 中 详细 介绍 。 


户 的 提示 信息 。 其 语法 为 : 


value 为 提示 框 的 显示 内 容 ， 可 以 是 任何 的 数据 类 型 ，value 显示 的 是 正常 的 内 容 ， 而 不 是 
在 HTML 页 面 上 输出 内 容 , 如 果 中 间 出 现 换行 必须 使 用 “\n”, 而 不 能 使 用 HTML 中 的 <br/> 


标签 。 例 如 : 
alert ("这 是 第 一 行 \n 这 是 第 二 行 ") ; 


显示 的 结果 为 包含 两 行文 字 的 提示 框 。 
2. confirm 


confirm 用 于 显示 确认 对 话 框 ， 包 含 一 个 OK 按钮 和 一 个 Cancel 按钮 。 其 语法 如 下 : 


confirm(value); 


value 为 提示 信息 ， 当 用 户 单 击 了 OK 按钮 时 ,会 返回 true; 当 用 户 单 击 Cancel 按钮 时 ,会 


返回 false。 例 如 ，js19.html。 
js19 html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTE=8"> 
<title>confirm 函数 的 使 用 </title> 
<script type="text/javascript"> 


alert ("你 单 击 了 oOoK 按钮 ! "); 
} else { 
alert ("你 单 击 了 Cancel 按钮 ! "); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


js19.html 的 演示 略 。 
3. prompt 


if(confirm(" 你 确定 要 离开 本 页 面 吗 ? ") == true) { 


prompt 函数 用 于 弹出 消息 对 话 框 ， 用 来 接收 用 户 输入 的 信息 。 对 话 框 包括 OK 按钮 、 


Cancel 按钮 以 及 文本 输入 框 。 其 语法 如 下 : 


1 
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prompt (stringl, string2); 


其 中 ，stringl 是 消息 对 话 框 的 提示 信息 ，string2 为 文本 输入 框 的 初始 参数 值 ， 此 值 可 以 修 
改 ， 也 可 以 省 略 ， 默 认 初 始 参数 值 为 null。 如 果 单 击 OK 按钮 ， 则 文本 输入 框 的 内 容 会 作 
为 返回 值 ， 如 果 单 击 Cancel 按钮 ， 则 返回 null 值 。 例 如 ，js20.html。 

js20.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>prompt 函数 的 使 用 </title> 
<script type="text/javascript"> 


var name = prompt ("请 输入 你 的 姓名 "，" 李 明明 ") ; 


if(name != null) { 
document .write ("欢迎 您 ，" + name); 
} else { 


document .write ("欢迎 您 ， 无 名 氏 "); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


js20.html 的 演示 略 。 

4. parseFloat 

parseFloat 用 于 将 字符 串 参数 转换 成 浮 点 型 的 数据 ， 其 语法 如 下 : 
parseFloat (string); 


5. parselnt 
parseInt 用 填 将 字符 串 参 数 转换 成 整 型 的 数据 ， 其 语法 如 下 : 
parseInt (string[, radix]); 


其 中 ， 第 一 个 参数 为 待 转换 的 字符 串 ， 第 二 个 参数 可 选 ， 指 转换 时 使 用 的 进 制 。 如 果 没 有 
指定 第 二 个 参数 ， 则 根据 字符 串 的 格式 确定 ; 如果 无 法 根据 字符 串 的 格式 确定 ， 则 按 十 进 
制 转换 。 

6. isNaN 

isNaN 用 于 判断 参数 是 否 是 数值 类 型 的 数据 ， 如 果 参 数 不 是 数值 ， 则 返回 false; 否则 
返回 tue。 以 上 几 个 方法 以 及 returm 语句 返回 函数 值 的 使 用 示例 可 参照 js21.html。 

js21.html: 


<!DOCTYPE html> 
<html> 
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</html> 
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<head> 
<meta charset="UTF-8"> 
<title> 计 算 圆 的 面积 </title> 
<script type="text/javascript"> 
function areal(r) { 
return 3.14 * 工本 工 7 
} 
var radius = prompt ("请 输入 圆 的 半径 "，"0"); 
if(!isNaN(radius)) { 
if(parseFloat (radius) >= 0) { 
document .write (" 圆 的 面积 为 : " + area (radius)); 
} else { 
alert ("请 输入 大 于 或 等 于 零 的 值 ! "); 
下 
} else { 
alert ("请 输入 数字 ! "); 
} 
<Hscript> 
</head> 
<body> 
</body> 


在 浏览 器 中 打开 js21.html， 输 入 非 负 的 数值 ， 可 以 计算 出 圆 的 面积 。 
.3.2 用 户 自 定义 函数 


除了 使 用 JavaScript 的 内 置 函数 之 外 ， 用 户 也 可 以 定义 自己 的 函数 。 自 定义 函数 的 创 


建 有 3 种 方法 ,分 别 为 使 用 关键 字 function 构造 、 使 用 Function 构造 、 使 用 函数 直接 量 ( 字 
面值 ) 构造 。 


1. 使 用 关键 字 function 构造 
其 格式 如 下 : 
function funcName([paraml] [, param2..]){ 


statements; 


} 


其 中 ，funcName 为 函数 的 名 称 ，param 为 参数 列表 ， 参 数 可 以 是 任何 类 型 。 定 义 函 数 时 需 
要 注意 的 事项 有 : 


。 各 个 函数 名 不 可 以 重复 ， 并 且 区 分 大 小 写 ; 

。 函数 名 的 命名 规则 和 变量 的 命名 规则 相同 ; 

。 参数 可 以 使 用 变量 、 常 量 或 者 表达 式 ; 

。 函数 如 果 有 多 个 参数 ， 多 个 参数 之 间 使 用 逗号 隔 开 ; 

。 函数 如 果 有 返回 值 ， 使 用 retum 语句 返回 ， 如 果 没 有 retum 语句 ， 函 数 将 返回 一 个 


x 
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undefined 值 ; 
。 自 定义 函数 不 会 自动 执行 ， 必 须 调用 才 会 执行 。 
2. 使 用 Function 构造 方法 
使 用 构造 方法 可 以 构造 一 个 匿名 函数 。 其 格式 如 下 : 


Var result = new Function(['paraml'][, 'param?2'].., 'statements'); 


其 中 ，param 为 字符 串 类 型 的 参数 列表 ，Function 的 最 后 一 个 参数 为 函数 体 语句 ， 如 果 有 
多 条 语句 ， 中 间 使 用 分 号 隔 开 。 例 如 : 


Var result = new Function('x', ‘'y', "return x+y'); 

这 种 方法 使 用 起 来 不 方便 ， 在 实际 开发 中 很 少 使 用 。 

3. 使 用 函数 直接 量 〈 字 面值 ) 构造 

函数 直接 量 是 一 个 表达 式 ， 它 可 以 定义 匿名 函数 。 使 用 函数 直接 量 的 方法 和 使 用 
function 关键 字 定义 非常 类 似 ， 但 是 使 用 直接 量 定义 函数 不 用 定义 函数 名 ， 而 且 是 将 函数 
用 作 表 达 式 ， 而 不 是 语句 。 其 格式 如 下 : 


Var result = function([paraml] [, param2,...]) {statements}; 
这 种 方式 也 允许 为 函数 指定 一 个 名 称 ， 以 利于 递归 程序 的 调用 。 例 如 : 
Var result = function funcName([paraml] [, param?2,..]) {statements}; 


注意 ; 使 用 Function 构造 函数 创建 的 函数 语句 由 字符 串 声 明 ， 表 达 不 方便 ; 而 函数 直 
接 量 定义 函数 使 用 的 是 标准 的 JavaScript 语法 ， 并 且 函 数 直接 量 只 被 解析 一 次 ， 但 是 作为 
字符 串 传 递 给 Function 构造 函数 的 JavaScript 代码 在 每 次 执行 时 都 会 被 解析 和 编译 ， 并 创 
建 一 个 新 的 函数 对 象 ， 所 以 当 需 要 频繁 地 调用 Function 构造 函数 时 的 效率 比较 低 。 使 用 
Function 构造 函数 允许 在 运行 时 动态 地 创建 和 编译 JavaScript 代码 ,但 是 函数 直接 量 定义 的 
函数 不 允许 。 使 用 Function 构造 函数 创建 的 函数 并 不 遵循 典型 的 作用 域 规定 ， 而 是 被 作为 
顶级 函数 。 

注意 : HTML 文件 是 文本 文件 ， 执 行 时 按照 文件 内 容 的 顺序 依次 加 载 ， 如 果 在 文件 的 
某 一 位 置 调用 JavaScript 函数 ， 则 子 数 必须 出 现在 调用 位 置 以 前 。 如 果 函 数 和 页 面 上 的 控 
件 的 事件 结合 起 来 ， 则 函数 调用 时 ， 页 面 的 控件 必须 可 以 成 功 加 载 。 


小 结 


。 JavaScript 是 基于 对 象 和 事件 驱动 的 客户 端 脚本 语言 ， 它 是 一 种 动态 、 弱 类 型 、 基 
于 原型 的 语言 、 内 置 支持 类 。 

。 JavaScript 的 运算 符 包括 赋值 运算 符 、 算 术 运 算 符 、 比 较 运 算 符 、 迪 辑 运算 符 、 条 
件 运 算 符 、 位 移 运算 符 以 及 字符 串 运算 符 。 

。 JavaScript 通过 流程 控制 语句 来 执行 程序 流 ， 程 序 流 由 若干 条 语句 组 成 。 除 了 顺序 
结构 之 外 ， 还 有 选择 结构 和 循环 结构 。 
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。 选择 结构 也 可 以 称 为 条 件 -分 支 结构 , 根据 条 件 的 成 立 与 否 , 执行 相应 的 语句 体 。 在 
JavaScript 中 提供 了 两 种 选择 结构 语句 ， 即 迁 else 语句 和 switch 语句 。 

。 循环 结构 也 称 为 迭代 结构 ， 可 以 使 语句 反复 执行 指定 的 次 数 ， 或 者 使 语句 反复 执行 
直到 满足 指定 的 条 件 为 止 。 

。 JavaScript 中 提供 的 循环 结构 有 for 语句 、forin 语句 、while 语句 、do-while 语句 。 

。 JavaScript 的 函数 包括 内 置 函 数 和 自 定义 函数 。 


习题 
1. 下 列 ( ) 不 是 JavaScript 的 特点 。 
A. 解释 执行 B. 在 客户 端的 浏览 器 执行 
C. 基于 对 象 D. 面向 对 象 


2. 下 列 JavaScript 代码 的 输出 结果 是 站 


Var n=parseInt ("100Hello World!"); 
document .write (n); 


A. NaN B. 100Hello World! 
C. 100 D. 出 现 运 行 错误 

3. 可 以 在 下 列 ( ) HTML 元 素 中 添加 JavaScript 脚本 。 
A. <script> B. <javascript> 
C. <js> D. <scripting> 


4. 除了 一 些 常 见 的 运算 符 之 外 ，JavaScript 还 提供 了 一 些 特殊 的 运算 符 ， 以 下 不 属于 
JavaScript 特殊 运算 符 的 是 % 
A. delete B. size 
C. new D. typeof 
5. 在 HTML 文件 中 使 用 外 部 的 JavaScript 文件 myjs， 下 面 语法 正确 的 是 〈 )。 
A. <language="JavaScript" Src="my.js"> 
B. <script language="JavaScript" src="my.js"></script> 
C. <script type="text/Javascript"></script> 
D. <language src="my.js"> 
.JavaScript 脚本 语言 有 什么 特点 ? 
.JavaScript 的 数据 类 型 有 哪儿 种 ? 
.在 页 面 中 如 何 使 用 JavaScript 脚本 ? 
.JavaScript 中 的 选择 结构 有 哪些 语句 ? 循环 结构 有 哪些 语句 ? 
10. JavaScript 中 的 转向 语句 有 哪些 ? 各 有 什么 用 法 ? 
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对 象 是 客观 世界 中 存在 的 实体 ， 对 象 有 自己 的 特性 、 状 态 和 行为 。 对 象 的 状态 由 具有 
当前 值 的 属性 组 成 ， 对 象 的 行为 由 方法 组 成 。JavaScript 是 基于 对 象 的 脚本 语言 ， 而 不 是 完 
全 的 面向 对 象 的 编程 语言 。 在 JavaScript 中 可 以 使 用 的 对 象 主要 有 以 下 几 类 ; 

。 JavaScript 的 核心 对 象 ， 例 如 Date 和 Math; 

。 用 户 自 定义 的 对 象 ; 

。 由 浏览 器 根据 Web 页 面 的 内 容 自 动 提供 的 对 象 ， 又 称 为 宿主 对 象 ， 例 如 document 
对 和 象 ; 

。 服务 器 上 的 固有 对 象 。 
本 章 主 要 讲解 前 两 种 ， 其 余 的 对 象 将 会 在 后 续 章 节 中 介绍 。 


(0 JavaScript 核心 对 象 


JavaScript 的 核心 对 象 主要 有 以 下 几 种 : 
。 数组 对 象 Array; 

。 字符 串 对 象 String; 

e 日 期 对 象 Date; 

。 数学 对 象 Math 。 


11.1.1 数组 对 象 


数组 对 象 用 来 在 单一 的 变量 名 中 存储 一 系列 的 值 。 数 组 是 在 编程 语言 中 经 常 使 用 的 一 
种 数据 结构 ， 可 以 用 来 存储 一 系列 的 值 。 对 于 强 类 型 的 高 级 程序 设计 语言 来 说 ， 数 组 中 的 
元 素 类 型 必须 是 相同 的 ， 但 在 JavaScript 中 ， 同 一 个 数组 中 可 以 存储 不 同 数据 类 型 的 元 素 。 

1. 创建 数组 

Array 对 象 表示 数组 ， 创 建 数组 的 方法 有 以 下 几 种 : 


Var array = new Array(); 
创建 一 个 空 数组 ， 长 度 为 0。 或 者 : 


Var array = new Array(size); 
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创建 一 个 大 小 为 size 的 数组 。 或 者 : 

var array = new Array (element0, element1l, ..); 
创建 一 个 数组 并 赋值 。 或 者 使 用 字面 值 : 

Var array = [2, 4, 6, 8, 10]; 


数组 的 长 度 是 可 变 的 ， 即 使 创建 了 固定 长 度 的 数组 ， 仍 然 可 以 在 长 度 之 外 存储 元 素 ， 
数组 的 长 度 会 随 之 改变 。 

2. 访问 数组 

通过 索引 可 以 访问 数组 元 素 ， 索 引 值 为 0~length-1 (假设 数组 的 长 度 为 length)。 例 如 : 

Var array = new Array(2, 3, 5); 

document .write (array[1]); // 输 出 结果 为 3 


3. 数组 的 属性 

数组 对 象 包括 3 个 属性 ， 分 别 为 length、prototype、constructor。 

1) length 属性 

length 属性 表示 数组 的 长 度 ， 即 数组 中 包括 的 元 素 的 个 数 。 数 组 的 索引 从 0 开始 ， 至 
length-1。 数 组 的 length 属性 是 可 读 写 的 ， 当 length 属性 变 得 更 大 时 ， 数 组 中 已 有 的 元 素 
值 不 发 生变 化 ， 其 他 部 分 为 undefined 类 型 的 数据 ; 当 length 属性 变 得 更 小 时 ， 数 组 中 索 
引 大 于 新 的 length-1 的 元 素 值 会 全 部 丢失 ， 成 为 undefined 类型。 例如 ，jsl.html。 

jsl.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 数 组 对 象 的 长 度 属性 </title> 
</head> 
<body> 
<script type="text/javascript"> 
Var array = new Array("A", "B", "C", "D"); 
document .write ("初始 的 数组 元 素 为 : ") ; 
printArray (array); 
array.length = 7; 
document .write ("length 变 大 的 数组 元 素 为 : ") ; 
printArray (array); 
array.length = 3; 
document .write ("length 变 小 的 数组 元 素 为 : ") ; 
printArray (array); 
document .write ("array[5]=" + array[5]); 
function printArray(array) { 
for(var i = 0; i < array.length; i++) { 


document .write (array[i] + "gnbsp;"); 
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sl 


document .write ("<br />"); 
} 
</script> 
</body> 
html> 


化 。 


jsl.html 的 显示 结果 如 图 11-1 所 示 。 


/中 &axs 的 KE 性 x 交 


© DO [O1270018020/c.. 廊 | : 


初始 的 数组 元 素 为 AB CD 
length 变 大 的 数组 元 素 为 ， 

ABCD undefined undefined undefined 
length 变 小 的 数组 元 素 为 ABC 
array[5]=undefined 


图 11-1 js1.html 的 显示 结果 


除了 显 式 地 修改 length 的 属性 外 ， 修 改 数 组 中 的 元 素 值 也 有 可 能 会 引起 length 值 的 变 


例如 : 
var array = new Array(); // 数 组 长 度 为 0 
array[5] = 10; // 数 组 长 度 变 为 6 


2) prototype 属性 
prototype 属性 是 所 有 JavaScript 对 象 所 共有 的 属性 ， 用 于 将 新 定义 的 属性 或 者 方法 添 


加 到 对 象 中 ， 对 象 的 实例 可 以 调用 添加 的 属性 或 方法 。 为 对 象 添加 方法 的 语法 如 下 : 


Array.prototype.methodName = functionName; 


或 者 : 


其 中 


Array.prototype.methodName = function([paraml] [, param2]..){ 
Statements; 
} 


Ph，methodName 为 添加 以 后 的 对 象 的 方法 名 ，functionName 是 定义 的 函数 的 方法 名 。 


第 一 种 方式 可 以 添加 已 经 定义 好 的 函数 。 第 二 种 方法 可 以 在 添加 的 同时 定义 函数 。param 
为 参数 列表 ，Statements 为 函数 体 语句 。 


为 对 象 添加 属性 的 语法 如 下 : 
Array.prototype.property = propertyName; 


例如 ，js2.html， 将 数组 的 打印 输出 以 及 返回 数组 中 的 最 大 值 的 方法 利用 prototype 属 


性 添加 到 Array 对 象 中 。 


js2 .html: 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Array 对 象 的 prototype 属性 </title> 
<script type="text/javascript"> 
function array max() { 
Var i, max = this[0]; 
for(i = 1; i < this.length; i++) { 
if(max < this[i]) { 
max = this[il]; 


return max; 
} 
function array print() { 
for(var i = 0; i < this.length; i++) { 
document .write (this[i] + "gnbsp;"); 
} 
document .write ("<br />"); 
} 
// 将 array_max 和 array_print 方法 添加 到 Array 对 象 
Array.prototype.max = array max; 
Array.prototype.print = array print; 
// 验 证 max 和 print 方法 
Var array = new Array(32, 8, -12, 156, 78); 
document .write ("数组 元 素 值 为 : "); 
array.print (); 
document .write ("数组 中 最 大 的 元 素 值 为 : " + array.max()); 
</script> 
</head> 
<body> 
</body> 
</html> 


js2.html 的 显示 结果 如 图 11-2 所 示 。 


口 Array 对 象 的 pr EN 
| C 全 |[@Olzzools. 友 | : | 


数组 元 素 值 为 ，32 8 -12 156 78 
数组 中 最 大 的 元 素 值 为 ，156 


11-2 js2.html 的 显示 结果 
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3) constructor 属性 

constructor 属性 返回 对 创建 此 对 象 的 数组 函数 的 引用 ， 其 语法 为 Array.constructor。 
constructor 属性 的 使 用 示例 可 参照 js3.html。 

js3 html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Array 对 象 的 constructor 属性 </title> 
<script type="text/javascript"> 
Var a = new Array(); 
if(a.constructor = Array) { 
document .write ("array is Array"); 
} else if(a.constructor = Boolean) { 
document .write ("a is Boolean"); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


js3.html 的 显示 结果 如 图 11-3 所 示 。 


/ [DY Arayxiico x \ 
| C OO |© 127.00.1:8. 


array is Array 


图 11-3 js3.html 的 显示 结果 
4. 数组 的 方法 
Array 对 象 提供 了 一 些 数组 常用 的 方法 ， 如 表 11-1 所 示 。 
表 11-1 Array 对 象 的 方法 


方法 说 明 

concatO 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 

join0 通过 指定 的 分 隔 符 进行 分 隔 ， 将 数组 所 有 的 元 素 连 接 成 一 个 字符 串 
popO 删除 并 返回 数组 的 最 后 一 个 元 素 

pushO) 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 

reverse() 颠倒 数组 中 元 素 的 顺序 

shift() 删除 并 返回 数组 中 的 第 一 个 元 素 


sliceO 从 某 个 已 有 的 数组 返回 选 定 的 元 素 
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续 表 
方法 说 明 
sort(O) 对 数组 的 元 素 进行 排序 
splice0) 插入 、 删 除 或 者 替换 数组 中 的 元 素 
toSource0) 返回 该 对 象 的 源 代 码 
toString0) 将 数组 转换 成 字符 串 ， 并 返回 结果 
toLocaleString0) 将 数组 转换 成 本 地 数组 ， 并 返回 结果 
unshift() 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
valueOfO 返回 数组 对 象 的 原始 值 


1) sort() 方 法 

Array 对 象 的 sort() 方 法 如 果 没 有 参数 ， 则 按照 字符 编码 的 升序 对 数组 中 的 元 素 进 行 排 
序 ， 即 使 是 整 型 的 数据 ， 也 按照 字符 的 编码 顺序 排序 。 如 果 要 对 数值 型 的 数据 进行 排序 ， 
需要 设置 sort() 方 法 的 参数 ， 例 如 ，js4.html。 

js4html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTEF-8"°> 
<title>Array 对 象 的 方法 </title> 
<script type="text/javascript"> 
Var array = new Array(); 
// 初 始 化 数组 
initArray (); 
document .write ("排序 之 前 的 数组 : <br />" + array + "<br />"); 
document .write (" 按 升序 排序 的 数组 : <br />" + array.sort (sortNumberAsc)+ 
人 
document .write (" 按 降序 排序 的 数组 : <br />" + array.sort (sortNumberDesc)+ 
李 eh 
document .write (" 按 字符 编码 排序 的 数组 : <br />" + array.sort()) 
function sortNumberAsc(a, b) { 
if(a < b) { 
return -1; 
} else if(a == b) { 
return 0; 
} else { 
return 1; 


} 
function sortNumberDesc(a, b) { 
f(a < BY 


return 1; 


} else if(a == b) { 
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return 0; 
} else { 
return -1; 
. 
} 
function initArray() { 
while(true) { 
var a = prompt ("请 输入 数值 ， 要 结束 时 请 输入 非 数值 数据 ,例如 'abc'",，"") ; 
if(isNaN(a)) { 
break; 
} else { 
// 将 输入 的 值 保 存 到 数组 的 最 后 一 个 位 置 


array.push (parseFloat (a)); 


} 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


请 求 js4.html， 并 输入 相应 的 数据 21.3, 9, 89, 45, 112, 543, abc， 显 示 结 果 如 图 11-4 所 示 。 


r 


Ellele 
) 口 Aray 对 销 的 方 x \. 


C 合 |@0 1270018.. 女 | : | 


排序 之 前 的 数组 : 
21.3.9.89.45.112.543 
按 升序 排序 的 数组 ， 
9.21.3.45.89.112.543 
按 降序 排序 的 数组 ， 
543.112.89.45.21.3.9 

按 字符 编码 排序 的 数组 ， 
112.21.3.45.543.89.9 


图 11-4 js4.html 的 显示 结果 


2) splice() 方 法 
Array 对 象 的 splice() 方 法 可 以 实现 在 数组 中 插入 、 删 除 或 者 替换 元 素 的 功能 。 其 语法 
格式 如 下 : 


splice(index, n, valuel, value2, ..); 
其 中 ，index 参数 是 必需 的 ， 指 的 是 在 数组 中 插入 、 删 除 或 者 替换 元 素 的 位 置 。n 值 也 是 必 
需 的 ， 规 定 删除 的 元 素 的 个 数 ， 可 以 取 0。valuel、value2 等 为 插入 到 数组 中 的 新 元 素 ， 从 
index 所 指 的 下 标 开始 插入 元 素 。 
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当 参 数 只 有 index 和 n 时 ， 实 现 的 是 删除 元 素 的 功能 。 例 如 : 
Var array = new Array(l, 2, 3, 4, 5); 
array.splice(1, 2); 
document .write (array); 

输出 的 结果 为 : 
1, 4, 5 


当 参 数 n=0， 并 且 给 出 了 插入 到 数组 中 的 新 元 素 时 ,实现 的 是 插入 元 素 的 功能 。 例 如 : 


Var array = new Array(l, 2, 3, 4, 5); 
array.splice(1l, 0, 6, 7, 8); 
document .write (array); 


输出 的 结果 为 : 


当 参 数 n>0， 并 且 给 出 了 插入 到 数组 中 的 新 元 素 时 ， 实 现 的 是 替换 元 素 的 功能 。 例 如 : 
Var array = new Array(l, 2, 3, 4, 5); 
array.splice(l1l, 2, 6, 7, 8); 


document .write (array); 


输出 的 结果 为 : 


JavaScript 中 的 Array 对 象 还 提供 了 很 多 其 他 方法 ， 可 以 方便 地 对 数组 对 象 进行 操作 ， 
其 中 pop0 和 push0 类 似 于 栈 , 可 以 在 数组 的 末尾 删除 或 添加 元 素 ; shift0 和 unshift0 类 似 于 
队列 ， 可 以 在 数组 的 首部 删除 或 添加 元 素 。 

另外 ， 在 JavaScript 中 只 有 一 维 数组 ， 不 能 直接 定义 多 维 数组 ， 例 如 以 下 方式 是 错 
误 的 : 

Var array = new Array(2,3); 

但 是 多 维 数组 可 以 通过 一 维 数组 的 嵌 套 定义 来 实现 。 例 如 ， 


var array = new Array((1,2,3), (4,5,6)); // 定 义 二 维 数组 
alert (array[1] [1]); // 显 示 元 素 5 


11.1.2 ”字符 串 对 象 


字符 串 对 象 是 JavaScript 中 比较 常用 的 一 种 数据 类 型 ， 它 封装 了 一 个 字符 串 ， 并 且 提 供 
了 相应 的 方法 ， 例 如 连接 字符 串 、 获 取 子 串 、 分 割 字符 串 等 。JavaScript 中 的 字符 串 是 不 可 
变 的 , 原始 的 字符 串 值 不 可 修改 , 例如 String.toLowerCase0, 返回 的 字符 串 是 全 新 的 字符 串 。 

1. 创建 字符 串 

创建 字符 串 有 多 种 方法 ， 可 以 使 用 字面 值 定义 字符 串 。 例 如 : 
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Var strl = "Welcome to China!™"; 
创建 类 型 为 String 的 变量 ， 也 可 以 使 用 单 引 号 。 

也 可 以 使 用 new 运算 符 调用 String 的 构造 方法 来 创建 字符 串 ， 返 回 一 个 新 建 的 字符 串 
对 象 ， 类 型 为 object。 例 如 : 

Var str2 = new String("Welcome to China!"); 
也 可 以 省 略 new 运算 符 ， 直 接 调 用 String 的 构造 方法 。 返 回 的 类 型 为 String， 例 如 : 

Var str3 = String("Welcome to China!™"); 


2. 字符 串 的 属性 

String 对 象 的 属性 类 似 于 Array 对 象 的 属性 ， 有 length、prototype 以 及 constructor， 用 
法 也 类 似 。String 的 length 属性 返回 的 是 字符 的 数目 ， 不 是 编码 的 长 度 ， 汉 字 被 认为 是 一 
个 字符 ， 例 如 ，js5.html。 

和 as 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Array 对 象 的 length 属性 </title> 
<script type="text/javascript"> 
var strl = "I love China!"; 
var str2 = "我 爱 中 国 ! "; 
var str3 = "I love 中 国 ! "; 
document .write (strl + "<br /3 长度 为 " + strl.length + "<br />"); 
document .write (str2 + "<br /> 长 度 为 " + str2.length + "<br />"); 
document .write (str3 + "<br /> 长 度 为 " + str3.1length); 
</script> 
</head> 
<body> 
</body> 
</html> 


js5.html 的 显示 结果 如 图 11-5 所 示 。 


| 
D Aray 对 象 的 er x OO 


| @C 人 三 10 12700.1:802 公 | : | 
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加 
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3. 字符 串 的 方法 
JavaScript 提供 了 丰富 的 对 字符 串 进行 操作 的 方法 ， 如 表 11-2 所 示 。 
表 11-2 String 对 象 的 方法 


方法 说 明 

chartAtO 返回 指定 位 置 的 字符 

concat() 连接 字符 串 

indexof0 检索 子 串 的 位 置 

splitO) 按照 指定 的 分 割 符 ， 将 字符 串 分 割 成 字符 串 数 组 
substring() 按照 索引 号 取 子 串 

toLowerCase() + 壬 串 转 换 成 小 写 并 返 芭 

toUpperCase() 将 字符 串 转换 成 大 写 并 返 区 

replace() 替换 字符 串 

anchor() 创建 锚 点 


1) charAtO 
charAt0 是 根据 索引 号 返回 字符 串 中 的 一 个 字符 ， 语 法 格式 为 : 
string.charAt (index) ; //index 为 索引 号 ， 有 效 值 为 0~length-1， 汉 字 作为 一 个 字符 来 处 理 


charAt() 的 使 用 示例 可 参照 js6.html。 
js6.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>String 对 象 的 charat () 方 法 </title> 
<script type="text/javascript"> 
Var strl = "Wwww.baidu.com"; 
document .write (strl + "<br />"); 
document .write ("charAt (5)=" + strl.charAt (5) + "<br />") 7 
var str2 = "I love 中 国 "; 
document .write (str2 + "<br />"); 
document .write ("charAt (8)=" + str2.charAt (8)); 
</script> 
</head> 
<body> 
</body> 
</html></html> 


js6.html 的 显示 结果 如 图 11-6 所 示 。 

2) concat() 

concat() 方 法 用 于 连接 多 个 字符 串 ， 并 返回 连接 后 的 结果 ， 其 语法 如 下 : 
string.concat (strl，str2，..); // 可 包含 1 个 或 多 个 参数 


concat() 方 法 的 使 用 示例 可 参照 js7.html。 
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加 各 


/ D String 对 条 的 cr x WU 
C 合 |@ 127001802 女 | : 


www.baidu .com 
charAt(5)=a 

Ilove 中 国 
charAt(8)= 国 


图 11-6 js6.html 的 显示 结果 


js7.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTE 8"> 
<title>String 对 象 的 concat () 方 法 </title> 
<script type="text/javascript"> 
Var strl = "Hello,"; 
Var str2 = "Welcome to "7 
var str3 = "China!"; 
document .write (str2.concat (str3) + "<br />"); 
document .write (strl.concat (str2, str3)); 
<VSEEHPE> 
</head> 
<body> 
</body> 
</html> 


js7.html 的 显示 结果 如 图 11-7 所 示 。 


y 口 String 对 象 的 cc x 恒 从 
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Welcome to Chinal 
Hello.Welcome to Chinal 
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3) indexOf() 
indexOf0) 方 法 是 查询 子 串 在 字符 串 中 出 现 的 位 置 索引 ， 有 效 值 为 0 一 length-1，length 
为 字符 串 的 长 度 ; 如 果 不 存在 子 串 ， 则 返回 值 -1。 其 格式 如 下 : 


string.indexof (substring, startpos); 


第 11 章 ， JavaScript 对 象 


// 查 找 string 中 substring 在 startpos 之 后 第 一 次 出 现 的 位 置 
或 者 : 


string.indexof (substring); 


// 查 找 string 中 substring 第 一 次 出 现 的 位 置 


indexOf() 的 使 用 示例 可 参照 js8.html。 
js8.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>String 对 象 的 indexof () 方 法 </title> 
<script type="text/javascript"> 
var str = "I love 中 国 , Welcome to China!"; 
document .write (str + "<br />"); 


document .write ("str.indexOof("' )=" + str.indexof ("中 国 ")+"<br />"); 
document .write ("str.indexOof ('e')="+ str.indexof ("e") + "<br />"); 
document .write ("str.indexOf ('Beijing')=" + str.indexOf ("Beijing")); 
</script> 
</head> 
<body> 
</body> 
</html> 


js8.html 的 显示 结果 如 图 11-8 所 示 。 
ses) le 


vy n Sting 对 象 的 x 全 全国 


© 全 LOhzootao2 | 


Ilove 中 国 ，Welcome to Chinal 
strindexOfr' 中 国 )-7 
strindexOf('e)=5 
strindexOf('Beijing)=-1 
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4) splitO 
split( 方 法 用 于 按照 指定 的 分 隔 符 , 将 一 个 字符 串 分 割 成 字符 串 数组 。 其 语法 格式 如 下 ; 
string.split (separator, howmany); 


其 中 ，separator 是 分 隔 符 ， 是 必需 的 参数 ， 可 以 用 字符 串 或 正则 表达 式 表 示 。howmany 是 
返回 字符 串 的 长 度 ， 可 选 。 如 果 设 置 了 该 参数 ， 则 返回 的 字符 串 数 组 的 长 度 不 会 大 于 此 参 


XGA 
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数 。 如 果 没有 设置 ， 则 返回 整个 字符 串 被 分 割 后 的 结果 。 


如 果 使 用 空 字 符 串 作为 分 隔 符 ， 则 字符 串 会 被 分 割 成 单个 字符 。string.split0 执 行 的 操 


作 和 Arrayjoin0 操 作 是 相反 的 。split0 的 使 用 示例 可 参照 js9.html。 
js9 html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>String 对 象 的 split () 方 法 </title> 
<script type="text/javascript"> 
Var str = "Welcome to China!"; 
document .write (str + "<br />"); 
document .write (str.split(" ") + "<br />"); 
document .write (str.split("™") + "<br />"); 
document .write (str.split("", 5)); 
</script> 
</head> 
<body> 
</body> 
</html> 


js9.html 的 显示 结果 如 图 11-9 所 示 。 


C 合 |@ 127001802 人 女 | : 


Welcome to Chinal 
Welcome.to.Chinal! 
We,l.c.0.m,e, :to. .C.h,.i.n.a.! 
Wel.c.o 
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5) substring() 


substring() 方 法 用 于 返回 字符 串 的 子 串 ， 可 以 返回 指定 的 两 个 下 标 之 间 的 字符 ， 格 式 


如 下 : 


string.substring (start, end); 


start 和 end 是 非 负 的 整数 ， 一 般 start<=end， 则 返回 下 标 位 置 为 start 至 end-1 之 间 的 
字符 。 如 果 start>end， 则 在 提取 子 串 之 前 ， 会 先 交 换 两 个 参数 的 值 。 另 外 ， 也 可 以 返回 指 


定 的 位 置 至 字符 串 末 尾 的 字符 。 格 式 如 下 : 


string.substring (start); 
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substring() 方 法 的 使 用 可 参照 js10.html。 
js10.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>String 对 象 的 substring () 方 法 </title> 
<script type="text/javascript"> 
Var str = "Welcome to China!™"; 
document .write (str + "<br />"); 
document .write ("str.substring (2, 9)=" + str.substring (2, 9) + "<br />"); 
document .write ("str.substring (9,2)=" + str.substring (9, 2)+"<br />"); 
document .write ("str.substring (7)=" + str.substring(7) + "<br />"); 
</script> 
</head> 
<body> 
</body> 
</html> 


js10.html 的 显示 结果 如 图 11-10 所 示 。 
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Welcome to Chinal 

strsubstring(2.9)=lcomet 
strsubstring(9.2)=lcomet 
strsubstring(7)= to Chinal 


图 11-10 js10.html 的 显示 结果 
6) anchor() 
anchor() 方 法 用 于 在 HIML 页 面 中 创建 锚 。 其 语法 格式 如 下 : 
string.anchor (anchorname) 
例如 : 


Var str = "Welcome to China!"; 


document .write (str.anchor ("anchor1")); 
以 上 JavaScript 语句 的 执行 结果 与 以 下 HTML 代码 的 输入 结果 相同 : 
<a name="anchorl">Welcome to China!</a> 


4. 转 义 字符 
在 JavaScript 中 ， 如 果 要 输出 一 些 特殊 字符 ， 例 如 双 引 号 、 单 引号 ， 或 者 要 输出 一 些 


xy 
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无 法 通过 键盘 直接 输入 的 字符 , 例如 退 格 等 , 需要 使 用 转 义 字符 。JavaScript 中 常用 的 转 义 


字符 如 表 11-3 所 示 。 


表 11-3” ”JavaScript 中 的 转 义 字符 


转 义 字符 表示 方法 转 义 字符 表示 方法 
单 引号 v 制 表 符 At 

双 引 号 w 退 格 符 mb 

反 斜 杠 \ 换 页 符 ¥ 

换行 符 n 及 符号 \& 

回 车 符 


换行 符 \n 一 般 与 alert() 方 法 接合 使 用 , 在 document.write() 中 一 般 使 用 <br 和。 转 义 字符 


的 使 用 示例 可 参照 js11.html。 
js11.html: 


<!DOCTYPE html> 
<html> 
<head> 


</script> 
</head> 
<body> 
</body> 
</html> 


js11.html 的 显示 结果 如 


11.1.3 “日 期 对 象 


在 JavaScript 中 提供 了 Date 对 象 , 上 


<meta charset="UTF-8"> 

<title> 转 义 字符 的 使 用 </title> 

<script type="text/javascript"> 
document .write ("You \& me are good friends!<br />"); 
document .write ("目标 文件 在 C:\\program 目录 下 <br />"); 


document .write ("str=\"Welcome to China!\""); 


1 图 11-11 所 示 。 


[en | a 
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You & me are good friends! 
目标 文件 在 Ci\program 目 录 下 


str="Welcome to Chinal” 


11-11 js11.html 的 显示 结果 


于 处 理 和 日 期 相关 的 内 容 。 通 过 Date 对 象 可 以 获 


取 系 统 时 间 、 设 置 系统 时 间 等 。Date 对 象 也 具有 prototype 和 constructor 属性 。 
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1. 创建 日 期 

创建 日 期 的 方法 有 多 种 。 

1) 无 参数 

可 以 使 用 以 下 语句 ， 创 建 一 个 表示 系统 当前 的 日 期 和 时 间 : 

Var date = new Date(); 

2) 字符 串 类 型 参数 

可 以 使 用 字符 串 类 型 参数 指定 日 期 和 时 间 以 及 具体 的 格式 ， 例 如 : 

var date = new Date ("MM/dd/yyyy HH:mm:ss"); 

3) 整 型 参数 

可 以 使 用 整 型 参数 创建 距离 JavaScript 内 部 定义 的 起 始 时 间 1970 年 1 月 1 日 的 某 一 毫 


秒 数 的 日 


期 和 时 间 。 例 如 : 


var date = new Date (milliseconds); 


4) 构造 函数 


可 以 使 用 构造 函数 创建 日 期 , 参数 可 以 为 2 一 7 个 , 依次 按照 year、 month、day、hours、 


minutes、seconds、milliseconds 匹配 。 例 如 : 


Var date = new Date(year, month); 


Var date = new Date(year, month, day); 


Var date = new Date(year, month, day, hours); 


var date = new Date(year, month, day, hours, minutes); 


var date = new Date(year, month, day, hours, minutes, seconds); 
var date = new Date (year, month, day, hours, minutes, seconds, milliseconds); 


2. 日 期 对 象 的 属性 和 方法 


Date 对 象 的 prototype 属性 的 用 法 类 似 于 Aray 对 象 .Date 对 象 提供 了 丰富 的 日 期 获取 
类 、 设 置 类 、 输 出 类 以 及 解析 类 方法 ， 其 中 比较 常用 的 方法 如 表 11-4 所 示 。 


表 11-4 Date 对 象 的 方法 


方法 说 明 

setDate0 获取 一 月 中 的 哪 一 天 (1 一 31) 
getDay0 获取 一 星期 中 的 哪 一 天 (0 一 6， 星 期 天 为 0) 
getFullYear0 获取 四 位 数 表示 的 年 份 

getYear() 获取 年 份 

getHours() 获取 一 天 中 的 哪 一 小 时 (0 一 23) 
getMinutes() 获取 一 小 时 中 的 哪 一 分 钟 《0 一 59) 
getSeconds() 获取 一 分 钟 的 哪 一 秒 (0 一 59) 
getMilliseconds() 获取 毫秒 (0 一 999) 

getMonth() 获取 一 年 中 的 哪 一 月 〈0 一 11) 
getTimeO 获取 以 毫秒 表示 的 时 间 崔 


setDate(date) 


设置 一 月 中 的 某 一 天 


3 
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续 表 
方法 说 明 
setDay(day) 设置 一 星期 中 的 某 一 天 
setYear(year) 设置 年 
setHours(hours) 设置 一 天 中 的 某 一 小 时 
setMinutes(minutes) 设置 一 小 时 中 的 某 一 分 钟 
setSeconds(seconds) 设置 一 分 钟 中 的 某 一 分 
setMilliseconds(milliseconds) 设置 一 分 中 的 某 一 毫秒 
setMonth(month) 设置 一 年 中 的 某 一 月 
setTime(milliseconds) 以 毫秒 (距离 1970 年 1 月 1 日 凌晨 ) 设置 日 期 


Date 对 象 的 使 用 示例 可 参照 js12.html。 
js12.html: 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title>Date 对 象 的 使 用 </title> 

<script type="text/javascript"> 
Var date = new Date(); 
document .write ("现在 是 " + date.getFullYear() + "年 " + (date.getMonth()+ 
1)+" 月 " + date.getDate() + "Hgnbsp;&nbsp;"); 
var day = date.getDay(); 
switch(day) { 


case '0: 
d = "星期 天 "; 
break; 

case 1: 
d = "星期 一 "; 
break; 

case 2: 
di 一 "是 期 三 > 
break; 

case 3: 
d = "星期 三 "; 
break; 

case 4: 
d = "星期 四 "; 
break; 

Case 与 < 
qd = "星期 五 "; 
break; 

default: 


三 “星期 六 *> 
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} 
document .write (d + "gnbsp;"); 
if(date.getHours() < 10) { 
document .write ("0"); 
} 
document .write (date.getHours() + ™:"); 
if(date.getMinutes() < 10) { 
document .write ("0"); 
} 
document .write (date.getMinutes() + ":"); 
if(date.getseconds() < 10) { 
document .write ("0"); 
} 
document .write (date.getSeconds () ) 7 
</script> 
</head> 
<body> 
</body> 
</html> 


js12.html 的 显示 结果 如 图 11-12 所 示 。 


D paedeit 用 xWa 
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现在 是 2018 年 6 月 21 日 星期 四 16:34:03 


图 11-12 js12.html 的 显示 结果 


利用 Date 对 象 实现 客户 端 动态 时 钟 的 用 法 可 参照 js13.html。 
js13.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 利 用 Date 实现 动态 时 钟 </title> 
<script type="text/javascript"> 
function showTime() { 
Var date = new Date(); 
var Strs; 


str = date getEallyear() + "=—" + (dates 


GetMontht) tt Y= 


Xi%y 
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+ date.getDate() + "gnbsp;"; 
str += full (date.getHours()) + ":" + full(date.getMinutes()) + 
n”:”+ fulll(date.getSeconds()); 
document .getElementById ("time") .innerHTML = str; 
} 
function full(n) { 
fn < LON TY 
ns Om 
} 
return n; 
} 
window.setInterval ("showTime ()", 1000); 
</script> 
</head> 
<body> 
<div id="time"></div> 
</body> 
</html> 


js13.html 的 显示 结果 如 图 11-13 所 示 ， 时 间 会 动态 变化 。 


/ D 和 ootexaas: x (CW 
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2018-6-21 16:34:48 


11-13 js13.html 的 显示 结果 


注意 : 尽量 不 要 在 setInterval() 方 法 调用 的 函数 中 使 用 document.write() 方 法 ， 因 为 
setInterval(0) 调 用 的 函数 执行 document.write() 输 出 非 HTML 标签 的 内 容 时 ， 会 重新 生成 页 
面 ,此 时 页 面 中 已 不 包含 JavaScript 脚本 , 因而 不 能 重复 执行 ,可 通过 更 改 div 的 innerHTML 
来 实现 。 


11.1.4 数学 对 象 


JavaScript 中 提供 了 Math 对 象 , Math 对 象 包含 一 些 常 用 属性 和 方法 , Math 对 象 与 Array 
对 象 、String 对 象 、Date 对 象 不 同 ， 没 有 构造 函数 ， 因 此 不 能 创建 Math 对 象 。 如 果 要 使 用 
Math 对 象 的 属性 或 方法 ， 可 直接 通过 Math. 属 性 名 或 者 Math .方法 名 调用 。 

1. Math 对 象 的 属性 

对 于 数学 运算 中 经 常 使 用 的 一 些 常量 值 ，Math 对 象 提供 了 一 系列 的 属性 ， 如 表 11-5 
所 示 。 
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表 11-5 ”Math 对 象 的 属性 


属性 名 说 明 

E 自然 对 数 的 底数 〔 约 等 于 2.718) 
LN2 2 的 自然 对 数 

LN10 10 的 自然 对 数 

LOG2E 以 2 为 底 的 E 的 对 数 

LOG10E 以 10 为 底 的 下 的 对 数 

PI 圆周 率 ( 约 等 于 3.14159) 
SQRT1 2 2 的 平方 根 的 倒数 

SQRT2 2 的 平方 根 


2. Math 对 象 的 方法 
Math 对 象 的 方法 如 表 11-6 所 示 。 


表 11-6 Math 对 象 的 方法 


方法 名 说 明 

sin(x)/cos(x)/tan(x) 返回 x 的 正弦 /余弦 /正切 值 
asin(x)/acos(x)/atan(x) 返回 x 的 反正 弱 / 反 余弦 /反正 切 值 
abs(x) 返回 x 的 绝对 值 

ceil(x) 返回 大 于 等 于 x 的 最 小 整数 
floor(x) 返回 小 于 等 于 x 的 最 大 整数 
exp(x) 返回 E 的 x 次 暴 

log(x) 返回 以 e 为 底 x 的 对 数 

max(x, y, ...)/min(x, y, ...) 返回 x,y,… 中 的 最 大 值 /最 小 值 
pow(x, y) 返回 x 的 y 次 究 

random() 返回 0~1 之 间 的 随机 数 
round(x) 返回 x 四舍五入 之 后 的 整数 
sqrt(x) 返回 x 的 平方 根 


random() 方 法 用 于 随机 产生 一 个 大 于 或 等 于 0、 小 于 1 的 浮 点 数 , 通过 合适 的 运算 可 以 
产生 任意 范围 内 的 数值 ， 例 如 产生 大 于 或 等 于 1、 小 于 end 的 任意 整数 ， 可 以 使 用 : 

parseInt (Math.random()*end + 1) 

如 果 要 产生 大 于 或 等 于 begin、 小 于 end 的 任意 整数 ， 可 以 使 用 : 

parseInt (Math.random()*(end - begin + 1) + begin) 


Iandom() 方 法 的 使 用 示例 可 参照 js14.html。 
js14.html: 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
<title>random() 方 法 的 使 用 </title> 
<script type="text/javascript"> 


X39y 
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Var arrayl = new Array(); 
Var array2 = new Array(); 
EOrNvar i = Or i < In 4 
// 产 生 值 为 1-50 的 随机 整数 
arrayl[i] = parseInt (Math.random() * 50 + 1); 
// 产 生 值 为 60-90 的 随机 整数 
array2[i] = parseInt (Math.random() * 31 + 60); 
} 
document .write ("arrayl 为 : " + arrayl + "<br />"); 
document .write ("排序 后 : " + arrayl.sort (sortNumberAsc) + "<br />"); 
document .write ("array2 为 : " + array2 + "<br />"); 
document .write ("排序 后 : " + array2.sort (sortNumberAsc)); 
function sortNumberAsc(a, b) { 
Eda < by 4 
return -1; 
} else if(a == b) { 
return 0; 
} else { 
return 1; 


} 
</seript> 
</head> 
<body> 
</body> 
</html> 


js14.html 的 随机 显示 结果 如 图 11-14 所 示 。 刷 新 页 面 ， 随 机 数 会 发 生变 化 。 


口 random0 方 法 3 x \ EN 


G 合 |@0 127001802( 女 


arrayl 为 1.42.21.43.38 
排序 后 ，1.21.38.42.43 

array2 为 : 90.74.75.61.83 
排序 后 ，61.74.75.83.90 


图 11-14 js14.html 的 显示 结果 


(> JavaScript 自 定 义 对 象 


在 JavaScript 中 ， 除 了 内 置 的 Array、String、Date 等 对 象 之 外 ， 还 可 以 创建 自 定义 对 
象 。 对 象 是 一 种 特殊 的 数据 类 型 ， 可 以 具有 一 系列 的 属性 和 方法 。 
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11.2.1 使 用 原型 添加 属性 和 方法 


所 有 的 内 置 对 象 和 用 户 的 自 定义 对 象 都 具有 只 读 的 prototype 属性 ， 通 过 prototype 属 
性 可 以 为 对 象 添加 属性 或 方法 , 添加 的 属性 或 方法 可 被 所 有 的 对 象 实例 共享 。 其 格式 如 下 : 


object .prototype.method = function(){.} 
object .prototype.property = property; 
例如 ，js15.html， 利 用 原型 添加 判断 字符 串 是 否 是 回 文 串 的 方法 。 
js15.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 利 用 原型 为 String 对象 添 加 方法 </title> 
<script type="text/javascript"> 
String.prototype.isPalindrome = function() { 
var flag = true; 
for(var i = 0; i < this.length / 2; i++) { 
if(this.charAt (i) != this.charAt (this.length ~- i - 1)) { 
flag = false; 
break; 
1 
} 
return flag; 
} 
Var strl = "Welcome to China!"; 
document .write (strl + ":<br />" + strl.isPalindrome () + "<br />"); 
Var str2 = "abcdefgfedcba"; 
document .write (str2 + ":<br />" + str2.isPalindrome()); 
</script> 
</head> 
<body> 
</body> 
</html> 


js15.html 的 显示 结果 如 图 11-15 所 示 。 

注意 : String 对 象 的 isPalindrome() 方 法 是 在 运行 的 过 程 中 添加 的 ， 此 方法 只 对 当前 页 
面 的 String 对象 有 效 。 如 果 希 望 其 他 网 页 也 可 以 使 用 String 对 象 的 此 方法 ,可 以 将 JavaScript 
脚本 放 在 单独 的 JS 文件 中 加 以 引用 。 


11.2.2 ”创建 自 定义 对 象 


在 JavaScript 中 创建 自 定义 对 象 有 以 下 4 种 方法 : 
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。 JSON 方法 ; 

。 构造 函数 方法 ; 
。 原型 方法 ; 

。 混合 方法 。 
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Welcome to Chinal- 
false 
abcdefgfedcba- 

true 


图 11-15 js15.html 的 显示 结果 


1. JSON 方法 
JSON (JavaScript Object Notation，JavaScript 对 象 表示 法 ) 是 一 种 轻 量 级 的 数据 交换 
格式 ， 采 用 完全 独立 于 语言 的 文本 格式 ， 是 理想 的 数据 交换 格式 ， 特 别 适 合 于 JavaScript 
与 服务 器 的 数据 交互 。JSON 是 JavaScript 的 原生 格式 ， 在 JavaScript 中 处 理 JSON 数据 不 
需要 任何 特殊 的 API 或 者 工具 包 。JSON 可 读 性 好 ， 易 编写 ， 同 时 利于 机 器 解析 与 生成 。 
JSON 与 XML 类 似 ， 但 是 比 XML 更 小 、 更 快 、 更 易 解析 。 利 用 JSON， 可 以 在 JavaScript 
代码 中 创建 对 象 ， 可 以 在 服务 器 端 程序 中 按照 JSON 的 格式 创建 字符 串 ， 并 且 可 以 在 
JavaScript 中 把 字符 串 解析 为 JavaScript 对 象 。 
1) 创建 JSON 格式 的 对 象 
利用 JSON 格式 创建 对 象 的 格式 如 下 : 
var jsonobject = { 
propertyname : value, // 对 象 内 的 属性 
functionname : function(){statements7)} // 对 象 内 的 方法 
] 7 
其 中 ,jsonobject 是 创建 的 JSON 对 象 的 名 称 ;propertyname 是 对 象 的 属性 名 称 ; functionname 
是 对 象 的 方法 名 称 。 
JSON 的 语法 规则 为 一 对 大 括号 ， 括 起 多 个 “名 称 / 值 ”集合 〈 也 可 以 理解 成 数组 )， 各 
个 “名 称 / 值 ”之 间 使 用 逗号 分 隔 。 使 用 JSON 格式 创建 对 象 的 示例 可 参照 js16.html。 
js16.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 创 建 JSON 格式 的 对 象 </title> 
<script type="text/javascript"> 


Var user = { 
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username: " 王 明 明 "， 
age: 20, 
moe 
tel: 1234567, 
mobile: 13666666666 
}, 
address: [{ 
city: "beijing", 
postcode: "100000" 


}, 
{ 
city: "shanghai", 
postcode: "200000" 
了 


ls 

show: function() { 
document .write ("username:" + this.username + "<br />"); 
document .write("age:" + this.age + "<br />"); 
document .write ("info.tel:" + this.info.tel + "<br />"); 
document .write ("info.mobile:" + this.info.mobile + "<br />"); 
document .write ("address:" + "<br />"); 
document .write ("city:" + this.address[0] .city + ",postcode:" + 
this.address[0] .postcode + "<br />"); 
document .write ("city:" + this.address[1] .city + ",postcode:" + 
this.address[1] .postcode + "<br />"); 


] 7 
user.show(); 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 中 创建 了 一 个 名 称 为 user 的 JSON 对 象 ， 包 含 4 个 属性 和 1 个 方法 ，JSON 
格式 使 用 大 括号 保存 对 象 ， 使 用 中 括号 保存 数组 。JSON 定义 对 象 时 ， 允 许 嵌 套 定 义 ， 例 
如 上 述 user 对 象 的 address 属性 是 由 两 个 JSON 对 象 组 成 的 数组 。js16.html 的 显示 结果 如 
图 11-16 所 示 。 

2) 解析 JSON 格式 的 字符 串 

JSON 最 常见 的 用 法 之 一 是 从 Web 服务 器 上 读 取 JSON 数据 ， 将 JSON 数据 转换 成 
JavaScript 对 象 ， 然 后 在 网 页 中 使 用 该 对 象 。 例 如 ， 可 以 使 用 eval0 函 数 解 析 符 合 JSON 格 
式 的 字符 串 。 

eval0 函 数 使 用 的 是 JavaScript 编译 器 ， 可 解析 JSON 文本 ， 然 后 生成 JSON 对 象 ， 但 
是 必须 把 文本 包含 在 括号 中 ， 把 字符 串 强 制 转换 成 普通 的 JavaScript 对 象 ， 才 可 以 避免 语 
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法 错误 。 例 如 : 
Var u = evall('('+user+')"'); 


如 果 被 解析 的 字符 串 是 数组 格式 ， 则 不 必 使 用 小 括号 进行 强制 转换 。 
js17.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 解 析 JSON 格式 的 字符 串 </title> 
<script type="text/javascript"> 
var user = '{username:" 王 明明 ",' + 
有 可 GD 二 
'show:function(){' + 
"document .write ("username:"+this.usernamet+"<br />");' + 
"document .write ("age:"+this.age);' + 
yp 
RS 
VAr = val (Tt ser + MY 
u.show(); 
</script> 
</head> 
<body> 
</body> 
</html> 


js17.html 的 显示 结果 如 图 11-17 所 示 。 
EdEE 


多 口 创建 /SONS x 风光 


GC OOh270018020/c 女 | : | 


le 


/ 了 D 解析 JSON 格 志 x 几 
C 合 |Ohzzoolsoz | : | 


username: 王 明明 

age:20 

info.tel:1234567 
info.mobile:13666666666 


address- username:- 王 明明 
city:beijing.postcode:100000 age:20 
city:shanghai.postcode:200000 

图 11-16 js16.html 的 显示 结果 图 11-17 js17.html 的 显示 结果 


2. 构造 函数 方法 
可 以 设计 一 个 构造 函数 ,然后 通过 调用 构造 函数 来 创建 对 象 。 构 造 函 数 可 以 带 有 参数 ， 
也 可 以 不 带 参数 。 其 语法 格式 如 下 : 


function funcName([paraml{[, param2[, param3...]]]){ 
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this.propertyl = valuel|paraml; 


this.methodName = function(){}; 


其 中 ， 
funcName 是 构造 函数 的 名 称 ，funcName 前 必须 加 上 function 关键 字 ; 
。 param 是 参数 列表 ; 

。 property] 为 对 象 的 属性 ， 可 以 包含 多 个 属性 ， 中 间 用 分 号 隔 开 ; 

。 methodName 为 对 象 的 方法 ， 可 以 包含 多 个 属性 ， 中 间 用 分 号 隔 开 ; 
。 methodName 必须 写 在 构造 函数 体 之 内 。 

使 用 构造 函数 创建 对 象 的 示例 可 参照 js18.html。 


js18.html: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 构造 函数 创建 对 象 </title> 
<script type="text/javascript"> 
function User (name, age, address, mobile, email) { 
this.name = name; 
this.age = age; 
this.address = address; 
this.mobile = mobile; 
this.email = email; 
this.show = function() { 
document .write("name:" + this.name + "<br />"); 
document .write("age:" + this.age + "<br />"); 
document .write ("address:" + this.address + "<br />"); 
document .write ("mobile:" + this.mobile + "<br />"); 
document .write ("email:" + this.email + "<br />"); 
} 
] 7 
var ul = new User(" 王 明明 "，20，" 山 东 "，"13666666666"，"wangmingming 
@163.com"); 
var u2 = new User ("李娜 "，20, "山东 ", "13888888888", "lina@163.com"); 
ul.show(); 
u2.show(); 
</script> 
</head> 
<body> 
</body> 
</html> 
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js18.html 的 显示 结果 如 图 11-18 所 示 。 
「 lee 
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name: 王 明明 

age:20 

address: 山 东 
mobile:13666666666 
email-wangmingming@163.com 
name 李 娜 

age:20 

address: 山 东 
mobile:13888888888 
email-lina@163.com 


图 11-18 js18.html 的 显示 结果 


在 js18.html 的 代码 中 ， 创 建 一 个 名 为 User 的 构造 函数 ， 此 函数 中 包括 5 个 属性 和 1 
个 方法 。 通 过 new 调用 构造 函数 的 方式 创建 名 为 ul 和 u2 的 User 类 型 的 对 象 ， 然 后 调用 
show0 方 法 显示 其 相关 信息 。 创 建 对 象 时 使 用 的 语句 为 : 

Var ul = new User(.); 
不 要 使 用 : 

User ul = new User (.…) 


上 述 方式 在 JavaScript 的 语法 中 是 不 允许 的 。 

3. 原型 方法 

使 用 原型 方法 也 中 以 创建 对 象 ， 即 通过 原型 向 对 象 添加 必要 的 属性 和 方法 。 这 种 方法 
添加 的 属性 和 方法 属于 对 象 ， 每 个 对 象 实例 的 属性 值 和 方法 都 是 相同 的 ， 可 以 再 通过 赋值 
的 方式 修改 需要 修改 的 属性 或 方法 。 使 用 原型 方法 创建 对 象 的 实例 可 参照 js19.html。 

jsl9 html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 原型 方法 创建 对 象 </title> 
<script type="text/javascript"> 
function User() {}; 
User.prototype.name = " 王 明 明 "; 
User.prototype.age = 20; 
User.prototype.address = "山东 "; 
User.prototype.mobile = "13666666666"; 
User.prototype.email = "wangmingming@163.com"; 
User.prototype.show = function() { 


document .write ("name:" + this.name + "<br />"); 


第 11 章 JavaScript 对象 


document .write ("age:"” + this.age + "<br />"); 
document .write ("address:" + this.address + "<br />") 7 
document .write ("mobile:" + this.mobile + "<br />"); 
document .write ("email:" + this.email + "<br />"); 
}; 
Var ul = new User(); 
ul.show(); 
Var u2 = new User(); 
u2 .name = "李娜 "; 
u2.mobile = "13888888888"; 
u2.email = "lina@163.com"; 
u2.show(); 
</script> 
</head> 
<body> 
</body> 


</html> 


js19.html 的 显示 结果 如 图 11-18 所 示 。 

4. 混合 方法 

使 用 构造 函数 可 以 为 对 象 的 实例 指定 不 同 的 属性 值 ， 每 当 创 建 一 个 对 象 时 ， 都 会 调用 

-次 内 部 方法 。 而 对 于 原型 方式 ， 因 为 构造 函数 没有 参数 ， 所 有 的 被 创建 的 对 象 的 属性 值 

都 相同 ， 要 想 创建 属性 值 不 同 的 对 象 ， 只 能 通过 赋值 的 方式 覆盖 原 有 的 值 。 在 实际 的 应 用 
中 ， 一 般 采 用 构造 方法 和 原型 方法 相 混合 的 方式 。 对 于 对 象 所 共有 的 属性 和 方法 可 以 使 用 
原型 方法 ， 对 于 对 象 的 实例 所 有 的 属性 可 以 使 用 构造 方法 。 例 如 上 例 中 的 User 对 象 的 5 
个 属性 可 以 通过 构造 方法 声明 ， 而 所 有 的 对 象 共享 的 show() 方 法 可 以 使 用 原型 方法 声明 ， 
具体 代码 可 参照 js20.html。 

js20.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 混合 方式 构造 方法 和 原型 方法 ) 创建 对 象 </title> 
<script type="text/javascript"> 
// 使 用 构造 方法 声明 属性 
function User(name, age, address, mobile, email) { 
this.name = name; 
this.age = age; 
this.address = address; 
this.mobile = mobile; 
this.email = email; 


1; 
// 使 用 原型 方法 声明 方法 
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</html> 


</script> 
</head> 
<body> 
</body> 


User.prototype.show = function() { 
document .write ("name:" + this.name + "<br />"); 
document .write("age:" + this.age + "<br />"); 
document .write ("address:" + this.address + "<br />"); 
document .write ("mobile:" + this.mobile + "<br />"); 
document .write ("email:" + this.email + "<br />"); 

} 

var ul = new User(" 王 明明 "，20，" 山 东 "，"13666666666"， 

"wangmingming@163.com"); 

var u2 = new User ("李娜 "，20, "山东 "，, "13888888888", "lina@163.com"); 

ul.show(); 

u2.show(); 


js20.html 的 显示 结果 如 图 11-18 所 示 。 


小 结 


JavaScript 是 一 种 基于 对 象 的 客户 端 脚本 语言 。 
JavaScript 中 的 对 象 由 一 系列 的 属性 和 方法 构成 。 


。 JavaScript 中 的 对 象 包括 核心 对 象 和 用 户 自 定义 对 象 。 
。 核心 对 象 主要 包括 Array、String、Date、Math 等 ， 每 种 对 象 都 提供 了 属性 和 常用 的 
方法 ， 可 以 方便 地 进行 操作 。 


。 使 用 Array 对 象 可 以 方便 地 操作 数组 。 

。 使 用 String 对 象 可 以 方便 地 操作 字符 串 。 

。 使 用 Date 对 象 可 以 方便 地 获取 系统 时 间 ， 并 且 可 以 完成 一 些 与 日 期 时 间 相 关 的 
操作 。 

。 使 用 Math 对 象 可 以 使 用 一 些 常见 的 数学 属性 值 ， 并 且 可 以 完成 部 分 数学 运算 。 


。 JavaScript 支持 用 户 自 定义 对 象 ， 可 以 使 用 JSON 方式 、 构 造 函 数 方式 、 原 型 方式 以 
及 混合 方式 来 创建 对 象 。 在 实际 的 开发 中 ， 混 合 方式 采用 得 最 多 。 


1.JavaScript 中 字符 串 对 象 的 〈 ) 方法 可 以 将 其 以 分 隔 符 分 隔 成 字符 串 集合 并 创 


全 
起 
es 
册 
洋 
划 
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trim() 
. split() 
. mid() 
D. replace() 
2. 以 下 代码 的 输出 结果 是 ( 因 


Var sl=15; 


和 


Var s2="I am a student"; 
if (isNaN (s1)) 

document .write(s1); 
if (isNaN (s2)) 

document .write(s2); 


A. 15 
B. Tam a student 
C. null 
D. 无 输出 
3. 下 面 关于 JavaScript 中 数组 的 说 法 中 ， 不 正确 的 是 )。 
A. 数组 的 长 度 必须 在 创建 时 给 定 ， 之 后 便 不 能 改变 
B， 由 于 数组 是 对 象 ， 因 此 创建 数组 需要 使 用 new 运算 符 
C. 数组 内 元 素 的 类 型 可 以 不 同 
D. 数组 可 以 声明 时 同时 进行 初始 化 
4. 以 下 代码 的 输出 结果 是 )s 


var student=new Object(); 
student .study=function () {window.alert ("上 课 了 ");} 
study(); 
A. 输出 “上 课 了 ” 
B. 程序 出 错 。 不 能 在 实例 化 对 象 之 后 ， 再 添加 方法 
C. 程序 出 错 。study() 方 法 不 能 直接 调用 ， 应 该 使 用 student 来 调用 
D. 程序 出 错 。 给 student.study 赋值 时 ， 右 边 的 函数 必须 包含 名 字 
5. 在 JavaScript 中 如 何 实现 2000 毫秒 之 后 调用 函数 show0 的 功能 ? 如何 实 现 每 隔 2000 
毫秒 调用 一 次 函数 show0 的 功能 ? 
6. 为 Array 对 象 添加 一 个 原型 方法 del(x)， 当 数组 中 存在 x 时 ， 删 除 x。 
7. 将 用 户 输入 的 字符 串 反 向 输出 到 页 面 上 ， 并 且 将 其 中 的 小 写字 母 转换 成 大 写字 母 。 
8. 创建 一 个 Person 对 象 ， 使 用 构造 方法 创建 name、age、gender 属性 ， 使 用 原型 方 
法 添加 country 属性 ， 并 设置 为 China， 使 用 原型 方法 添加 show0 方 法 ， 用 于 输出 其 各 属性 
的 值 。 
9. 使 用 JavaScript 完成 一 个 抽奖 程序 ， 当 单 击 页 面 上 的 开始 抽奖 按钮 时 ， 在 1 一 36 中 
选取 7 个 互 不 相同 的 数字 ， 输 出 到 页 面 上 。 如 果 其 中 包含 28， 则 显示 “一 等 奖 ”， 如 果 其 
中 包含 18， 则 显示 二 等 奖 ， 如 果 其 中 包含 8， 则 显示 三 等 奖 ， 其 他 情况 显示 “没有 中 奖 ”。 


(2 BOM 和 DOM 概述 


浏览 器 对 象 模型 (Browser Object Model, BOM) 是 用 于 描述 对 象 与 对 象 之 间 层 次 关系 
的 模型 ， 该 模型 提供 了 独立 于 内 容 的 、 可 以 与 浏览 器 窗口 进行 交互 的 对 象 结构 。BOM 也 
可 以 称 为 窗口 对 象 模型 (Window Object Model)， 当 浏览 器 打开 一 个 网 页 文件 时 ，window 
对 象 对 应 着 浏览 器 窗口 本 身 。 浏 览 器 对 象 模型 的 层次 结构 如 图 12-1 所 示 。 


Ce 


history | | document location 
link | | form anchor 
[ text | radio | button | reset | select | 


图 12-1 浏览 器 对 象 模型 


JavaScript 是 一 种 基于 对 象 的 脚本 语言 。 在 JavaScript 中 涉及 的 对 象 可 分 为 3 类 : 核心 
对 象 、 用 户 自 定义 对 象 以 及 宿主 对 象 等 。 核 心 对 象 和 用 户 自 定 义 对 象 在 前 面 已 经 介绍 过 。 
宿主 对 象 是 执行 JavaScript 脚本 的 环境 提供 的 对 象 。 对 于 嵌入 到 网 页 中 的 JavaScript 来 说 ， 
其 宿主 对 象 是 浏览 器 提供 的 预先 定义 好 的 对 象 ， 所 以 又 称 为 浏览 器 对 象 。 不 同 的 浏览 器 提 
供 的 宿主 对 象 及 其 实现 方法 可 能 不 同 。 图 12-1 中 所 涉及 的 对 象 都 是 宿主 对 象 ,例如 window、 
document、history 以 及 location 等。 

文档 对 象 模型 (Document Object Model，DOM) 是 一 种 用 于 HTML 和 XML 文档 的 编 
程 接口 。 它 为 文档 提供 了 一 种 结构 化 的 表示 方法 ， 可 以 改变 文档 的 内 容 和 呈现 方法 ，DOM 
可 以 把 网 页 、 脚 本 以 及 其 他 的 编程 语言 联系 起 来 。 

DOM 可 以 看 作 是 HIML 页 面 的 模型 , 是 一 套 对 文档 的 内 容 进 行 抽象 和 概念 化 的 方法 。 
在 DOM 中 , HTML 的 每 个 标签 元 素 被 作为 一 个 对 象 。 JavaScript 通过 调用 DOM 中 的 属性 、 
方法 可 以 对 网 页 中 的 标签 元 素 进行 控制 。 例 如 , 读 取 页 面 中 文本 框 的 值 、 设 置 文本 框 的 值 等 。 
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为 了 避免 各 种 不 同 的 浏览 器 提供 的 DOM 对 象 的 不 同 所 带 来 的 操作 的 不 便 ，Netscape、 
正 以 及 其 他 的 浏览 器 制造 商 与 W3C 一 同 推出 了 标准 化 的 DOM, 并 于 1998 年 10 月 完成 了 
DOM Level 1。W3C 对 DOM 的 定义 是 :“ 一 个 与 系统 平台 和 编程 语言 无 关 的 接口 ， 程 序 和 
脚本 可 以 通过 这 个 接口 动态 地 对 文档 的 内 容 、 结 构 和 样式 进行 访问 和 修改 ”标准 化 的 
DOM， 在 独立 性 和 适用 范围 等 名 方面 ， 都 远 远 超过 了 各 个 浏览 器 专 有 的 DOM。 


(2> JavaScript 事件 


JavaScript 采用 了 事件 驱动 的 响应 机 制 ,用 户 在 网 页 上 的 交互 操作 , 会 触发 相应 的 事件 。 
当 事 件 发 生 时 ， 系 统 可 以 调用 JavaScript 中 指定 的 事件 处 理 函 数 进行 处 理 。 事 件 可 以 被 
JavaScript 侦 测 到 。 网 页 中 的 每 个 元 素 都 可 以 产生 某 些 可 以 触发 JavaScript 函数 的 事件 。 例 
如 , 当 单 击 网 页 上 的 某 个 按钮 时 , 此 按钮 的 onClick 事件 发 生 , 可 以 触发 某 个 函数 。JavaScript 
中 事件 分 为 一 般 事 件 、 页 面相 关 事件 、 表 单 相关 事件 、 数 据 绑 定 事件 等 。 一般 事件 如 表 12-1 
所 示 。 


表 12-1 JavaScript 中 的 一 般 事件 


事件 说 明 

onClick 鼠标 单 击 事件 ， 多 用 在 某 个 对 象 控制 的 范围 内 的 鼠标 单 击 
onDblClick 鼠标 双击 事件 

onMouseDown 鼠标 上 的 按钮 被 按 下 

onMouseUp 鼠标 上 的 按钮 被 按 下 ， 松 开 时 激发 的 事件 
onMouseOver 当 鼠 标 移动 到 某 对 象 范围 的 上 方 时 触发 的 事件 
onMouseOut 当 鼠 标 离开 某 对 象 范围 时 触发 的 事件 
onMouseMove 当 鼠 标 移动 时 触发 的 事件 

‘onKeyPress 当 键 盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 的 事件 
onKeyDown 当 键 盘 上 的 某 个 键 被 按 下 时 触发 的 事件 
onKeyUp 当 键 盘 上 的 某 个 键 被 释放 时 触发 的 事件 


页 面相 关 事件 如 表 12-2 所 示 。 
表 12-2 ” JavaScript 中 的 页 面相 关 事件 


事件 说 明 

onAbort 图 片 在 下 载 时 被 用 户 中 断 时 触发 的 事件 

onBefore 当前 页 面 的 内 容 将 要 改变 时 触发 的 事件 

onError 当前 页 面 因为 某 种 原因 而 出 现 错误 时 触发 的 事件 

onLoad 当前 页 面 内 容 加 载 到 浏览 器 时 触发 的 事件 

onMove 浏览 器 窗口 移动 时 触发 的 事件 

onResize 浏览 器 窗口 的 大 小 发 生 改变 时 触发 的 事件 

onScroll 浏览 器 窗口 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 

onStop 浏览 器 的 停止 按钮 被 按 下 时 或 者 正在 下 载 的 文件 被 中 断 时 触发 的 事件 
onUnload 当前 页 面 刷新 或 者 浏览 器 在 本 页 面 打 开 其 他 资源 时 触发 的 事件 


表单 相关 事件 如 表 12-3 所 示 。 
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表 12-3 JavaScript 中 的 表单 相关 事件 


事件 说 明 

onBlur 当前 元 素 失去 焦点 时 触发 的 事件 

onChange 当前 元 素 失去 焦点 并 且 元 素 的 内 容 发 生 改变 时 触发 的 事件 
onFocus 当前 元 素 获得 时 触发 的 事件 

onReset 重 置 表单 时 触发 的 事件 

onSubmit 提交 表单 时 触发 的 事件 


(23 Window 对 象 


window 对 象 是 最 主要 的 宿主 对 象 , 也 是 最 顶层 的 宿主 对 象 , 是 其 他 宿主 对 象 的 父 对 象 。 
window 对 象 对 应 浏览 器 窗口 本 身 。 如 果 网 页 中 包含 框架 集 ， 则 每 个 框架 对 应 一 个 window 
对 象 ， 并 且 原 网 页 也 对 应 一 个 window 对 象 。 只 要 打开 了 浏览 器 窗口 ， 不 管 该 窗口 中 是 否 
有 打开 的 网 页 ， 当 遇 到 body、frameset 或 者 frame 时 ， 都 会 自动 创建 window 对 象 的 实例 。 


12.3.1 window 对 象 的 属性 


window 对 象 有 很 多 属性 ， 其 中 常用 的 属性 如 表 12-4 所 示 。 
表 12-4 window 对 象 的 常用 属性 


属性 说 明 

name 当前 窗口 的 名 称 ， 可 读 写 属性 

parent 如 果 当 前 窗口 有 父 窗 口 ， 则 表示 其 父 窗口 ， 只 读 属 性 
opener 产生 当前 窗口 的 窗口 对 象 ， 只 读 属性 

self 当前 窗口 对 象 ， 只 读 属 性 

top 当前 窗口 的 最 顶层 窗口 对 象 ， 只 读 属 性 

status 浏览 器 状态 栏 中 显示 的 内 容 ， 可 读 写 属性 
defaultstatus 浏览 器 状态 栏 中 显示 的 缺 省 内 容 ， 可 读 写 属性 


status 属性 用 于 临时 改变 状态 栏 的 内 容 ， 而 defaultstatus 一 般 用 于 定义 浏览 器 状态 栏 的 
默认 显示 内 容 。 例 如 ，jsl.html， 当 鼠标 移动 到 超级 链接 上 方 时 ， 浏 览 器 的 状态 栏 显示 欢迎 
信息 。 

jsl.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>window 对 象 的 defaultstatus 属性 和 status 属性 </title> 


<script type="text/javascript"> 
window.defaultstatus = "这 是 状态 栏 的 默认 信息 ! "; 


function change() { 
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window-status = " 当 把 鼠标 移 到 图 像 上 方 时， 状态 栏 显示 的 信息 ! "; 
} 
</script> 
</head> 
<body> 
<a href="" onMouseOver="change () ;return true"> 
<img src="image/flowerl.jpg" width="200" border="0" /> 
</a> 
</body> 
</html> 


当 把 鼠标 移 到 图 像 上 方 时 ， 浏 览 器 的 地 址 栏 里 的 信息 会 发 生变 化 。 
12.3.2 ”window 对象 的 方法 


window 对 象 的 方法 很 多 , 可 以 分 为 窗 体 控制 方法 、 对 话 框 方法 、 时 间 等 待 与 间隔 方法 。 
1. 窗 体 控制 方法 
窗 体 控制 方法 如 表 12-5 所 示 。 


表 12-5 窗 体 控制 方法 


方法 说 明 

moveBy(x, y) 从 当前 位 置 水 平移 动 窗 体 x 个 像素 ， 垂 直 移动 窗 体 y 个 像素 

moveTo(x, y) 移动 窗 体 左上 角 到 相对 于 屏幕 左上 角 的 (x, y) 点 

resizeBy(w, h) 相对 窗 体 当 前 的 大 小 ， 宽 度 调整 w 个 像素 ， 高 度 调整 b 个 像素 

resizeTo(w, h) 把 窗 体 宽度 调整 为 w 个 像素 ， 高 度 调整 为 h 个 像素 

scrollTo(x, y) 窗 体 中 若 有 滚动 条 ， 将 横向 滚动 条 移动 到 相对 于 窗 体 宽度 为 x 个 像素 的 位 置 ， 
将 纵向 滚动 条 移动 到 相对 于 窗 体高 度 为 y 个 像素 的 位 置 

scrollBy(x, y) 窗 体 中 若 有 滚动 条 , 将 横向 滚动 条 移动 到 相对 于 当前 滚动 条 的 x 个 像素 的 位 置 ， 


将 纵向 滚动 条 移动 到 相对 于 当前 纵向 滚动 条 高 度 为 了 个 像素 的 位 置 
focus0 使 窗 体 或 控件 获取 


blur0 使 窗 体 或 控件 失去 
openO0 打开 〈 弹 出) 一 个 新 的 窗 体 
close0) 关闭 窗 体 
1) focus0 和 Pblur0 
focus() 和 blur() 分 别 为 窗 体 或 控件 获取 焦点 和 失去 焦点 ， 例 如 ，js2.html， 使 用 焦点 变 
化 来 验证 表单 中 内 容 文 本 框 值 的 合法 性 。 
js2.html: 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 
<title> 使 用 window 的 focus 方法 和 blur 方法 </title> 


x 
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<script type="text/javascript"> 
function checkValue (txt) { 
LECRE Valde == wu) 
alert (txt .name + "的 内 容 不 能 为 空 ! "); 


</script> 
<style type="text/css"> 
input { 
background-color: #FFFFFF; 
width: 90%; 
float: left; 
border: lpx ridge blue; 
} 
table { 
border: lpx solid green; 
font-size: 12px; 
background-color: #E5EEFS5; 
width: 250px; 


Ey 
text-align: left; 
} 


</style> 
</head> 
<body> 
<form action="#" method="post"> 
<table> 

<tr> 
<td> 内 容 : </td> 
<td><input type="text" onBlur="checkValue (this)" 
onMouseMove="this.focus() ;this.select()" value=" 这 是 内 容 
文本 框 " name="context"/></tqd> 

<AEr> 

<tr> 
<td> 用 户 名 : </td> 
<td><input type="text" name="name" required/></td> 

</Er> 

<tr> 
<td> 密 码 : </td> 
<td><input type="password" name="password" required/> 
</td> 

<AEE2 


i 
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<td> 联 系 方式 : </td> 
<td><input type="text" name="mobile" required/></td> 

</Er> 

< 
<tQq colspan="2"> 

<input type="submit" /> 

</td> 

</Er> 

</table> 
</form> 
</body> 


</html> 


当 和 鼠标 移 到 内 容 文本 框 时 ， 文 本 框 的 内 容 会 自动 被 选中 ， 如 图 12-2 所 示 。 


/ DD fwindow x ED 
OO al 


内 容 : 
用 户 名 : 
密码 : 
联系 方式 : 
Submit 


图 12-2 js2.html 的 显示 结果 


当 用 户 名 、 密 码 、 联 系 方式 等 文本 框 失去 焦点 时 , 会 验证 相应 的 信息 ， 如 果 信 息 为 空 ， 
会 给 出 相应 的 提示 。 

在 HIML5 中 可 以 直接 使 用 表单 控件 的 required 属性 在 提交 表单 时 进行 非 空 校 验 ， 本 
例 中 的 用 户 名 、 密 码 、 联 系 方式 都 通过 此 方式 验证 。 

2) open() 

open() 方 法 用 于 打开 一 个 新 窗口 ， 其 语法 格式 如 下 : 


window.open (url, name, features, replace); 


其 中 ， 
。 url: 可 选 的 字符 串 ， 声 明了 要 在 新 窗口 显示 的 文档 的 URL。 如 果 省 略 此 参数 , 或 者 
它 的 值 是 空 字符 串 ， 则 新 窗口 不 显示 任何 文档 。 
。 name: 可 选 的 字符 串 ， 该 字符 串 声明 了 新 窗口 的 名 称 。 此 名 称 可 用 作 相 关 标 签 的 
target 属性 值 。 如果 该 参数 指定 了 一 个 已 经 存在 的 窗口 , 则 open0 方 法 不 会 再 创建 一 
个 新 窗口 ， 而 是 返回 对 指定 窗口 的 引用 。 此 种 情况 下 features 参数 将 被 忽略 。 
。 features: 可 选 字符 串 ， 声 明了 新 窗口 要 显示 的 标准 浏览 器 的 特征 。 如 果 省 略 了 该 参 


XY 
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数 ， 则 新 窗口 将 以 标准 特征 显示 。 如 果 有 多 个 特征 值 ， 则 中 间 使 用 去 号 隔 开 。 新 窗 
口 的 特征 如 表 12-6 所 示 。 


表 12-6 窗口 特征 
特征 名 说 明 
channelmode 是 否 使 用 channel 模式 显示 窗口 。 默 认为 no， 可 选 值 为 yeslnol1l0 
directories 是 否 添加 目录 按钮 。 默 认为 yes， 可 选 值 为 yeslnol1|0 


fullscreen 是 否 使 用 全 屏 模式 显示 浏览 器 ， 默 认为 no。 处 于 全 屏 模式 的 窗口 必须 同时 也 处 于 
channel 模式 ， 可 选 值 为 yeslnolll0 

height 窗口 文档 显示 区 的 高 度 ， 单 位 为 像素 

width 窗口 文档 显示 区 的 宽度 ， 单 位 为 像素 

left 窗口 的 X 坐标 ， 单 位 为 像素 

top 窗口 的 Y 坐标 ， 单 位 为 像素 

location 是 否 显示 窗口 的 地 址 栏 ， 默认 为 yes， 可 选 值 为 yeslnolll0 

menubar 是 否 显示 窗口 的 菜单 栏 ， 默 认为 yes， 可 选 值 为 yeslnolll0 

resizable 是 否 可 调节 窗口 的 尺寸 ， 默 认为 yes， 可 选 值 为 yeslnolll0 

scrollbars 是 否 显示 滚动 条 ， 默 认为 yes， 可 选 值 为 yeslnolll0 

status 是 否 显示 状态 栏 ， 默 认为 yes， 可 选 值 为 yeslnolll0 

titlebar 是 否 显示 标题 栏 ， 默 认为 yes， 可 选 值 为 yeslnol1|0 

toolbar 是 否 显示 工具 栏 ， 默 认为 yes， 可 选 值 为 yeslnolll0 


。 replace: 可 选 布 尔 值 , 规定 了 装载 到 窗口 的 URL 是 否 在 窗口 的 浏览 历史 中 替换 已 有 
条 目 。 如 果 replace 的 值 为 tue， 则 URL 替换 浏览 历史 的 已 有 条 目 ; 如 果 replace 的 
值 为 false， 则 URL 在 浏览 历史 中 创建 新 的 条 目 。 
open() 方 法 的 使 用 示例 可 参照 js3.html。 在 js3.html 中 单 击 相应 按钮 时 ， 打 开 一 个 新 的 
窗口 ， 新 窗口 打开 的 文档 为 new.html。 
new.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 一 个 新 窗口 </title> 
</head> 
<body onLoad="setTimeout ('self.close()',5000)"> 
这 是 一 个 新 的 窗口 !<br /> 5 秒 后 窗口 会 自动 关闭 ! 
</body> 
</html> 


js3.html: 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 
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<title>window 的 open () 方 法 和 close () 方 法 </title> 
<script type="text/javascript"> 
function openNew() { 
window.open ("new.html", "new", "height=200,width=200, status=yes, 
toolbar=no, menuba=yes, location=yes, resizable=yes"); 
} 
</SCript> 
</head> 
<body> 
<input type="button" value=" 打 开 新 窗口 " onClick="openNew()" /> 
</body> 
</html> 


js3.html 的 显示 结果 如 图 12-3 所 示 。 
单 击 “打开 新 窗口 ”按钮 ， 显 示 结 果 如 图 12-4 所 示 ，5 秒 之 后 ， 新 窗口 会 自动 关闭 。 


© 127.0.0.1:8020/ch12/new 


口 window 的 oper x \ 


一 - 这 是 一 个 新 的 窗口 ! 
GC OHO |@ 127.00.1:8. : 5 秒 后 窗口 会 自动 关闭 ! 
打开 新 窗口 
图 12-3 js3.html 的 显示 结果 图 12-4 打开 的 新 窗口 
2. 对 话 框 方法 


对 话 框 方法 如 表 12-7 所 示 。 

表 12-7 对 话 框 方法 
方法 
alert(str) 出 一 个 对 话 框 (包含 OK 按钮 ) 
prompt(strl, str2) 弹出 消息 对 话 框 (包含 OK 按钮 、Cancel 按钮 与 文本 输入 框 ) 
confirm(str) 弹出 消息 对 话 框 (包含 OK 按钮 与 Cancel 按钮 ) 


3. 时 间 等 待 与 间隔 方法 
时 间 等 待 与 间隔 方法 如 表 12-8 所 示 。 
表 12-8 时间 等 待 与 间隔 方法 


方法 说 明 

setTimeout(codes, millisec) 指定 毫秒 数 后 执行 指定 的 代码 
clearTimeout(timeout) 取消 指定 的 setTimeout 方法 将 要 执行 的 代码 
setInterval(codes, millisec) 间隔 指定 的 毫秒 数 重复 地 执行 指定 的 代码 
clearInterval(interval) 取消 指定 的 setInterval 方法 将 要 执行 的 代码 


1) setTimeout() 和 clearTimeout() 方 法 
setTimeout() 方 法 可 以 实现 指定 的 毫秒 数 后 执行 指定 的 代码 ， 其 语法 格式 如 下 : 


x 


cy 
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setTimeout (codes, millisec) ; 


其 中 ， 
e codes 是 必需 的 ， 可 以 是 JavaScript 代码 串 ， 也 可 以 是 JavaScript 函数 名 ; 
。 millisec 也 是 必需 的 ， 指 等 待 的 毫秒 数 。 
注意 : setTimeout() 方 法 只 能 使 codes 执行 一 次 。 如 果 要 执行 多 次 ， 则 可 以 循环 调用 ， 
也 可 以 使 用 setInterval() 方 法 。 
setTimeout() 方 法 的 使 用 示例 可 参照 js4.html， 实 现 一 个 计时 器 。 
jit 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 window 的 setTimeout () 实现 计时 器 </title> 
<script type="text/javascript"> 
var count = 0; 


function timeCount() { 
document .getElementById ("time") .value = timeChange (count); 
Count++7 
setTimeout ("timeCount ()", 1000); 
} 
function timeChange (second) { 
var h= 0, 
m= 0, 
3 = 10? 
Ss = second; 
if(second > 3600) { 
h = parseInt (second / 3600) 7 
second = second - h * 3600; 
} 
if(second > 60) { 
m= parseInt (second / 60); 
Second = second - m * 60; 
5s = second; 
站 
retarm foo >- Em GUO 
} 
function full(t) { 
Et TOE 
ds 
} 
return t; 


第 12 章 “DOM 编程 


</ Script> 
<style type="text/css"> 
input { 
background-color: #FFFFFF; 
width: 80px; 
border: lpx ridge #000000; 
} 
</style> 
</head> 
<body> 
<input type="button"” value=" 开 始 计时 " onclick="timeCount()" />&nbspy; 
&nbsp7 
<input type="text" id="time" /> 
</body> 
</html> 


js4.html 的 显示 结果 如 图 12-5 所 示 ， 


“开始 计时 ”按钮 ， 会 显示 计时 的 时 间 。 


使 用 window 和 x We 


| C 侣 |©127.0018... 六 


i ee 


图 12-5 js4.html 的 显示 结果 


clearTimeout(timeout) 方 法 用 于 取消 用 setTimeout() 方 法 设 定 的 计时 对 象 ， 参 数 timeout 
为 计时 器 的 名 称 。 其 使 用 示例 可 参照 js5.html, 它 在 js4.html 的 基础 上 添加 停止 计时 的 功能 。 
js5 html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 window 的 clearTimeout () 停 止 计时 器 </title> 
<script type="text/javascript"> 
Var count = 0; 
var timeout; 
function timeCount() { 


document .getElementById("time") .value = 
Count++; 


timeChange (count); 


timeout = setTimeout ("timeCount ()", 1000); 


<57 


ore 
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function timeChange (second) { 


var h= 0, 
m= 0, 
3 = "0 

5 = second; 


if(second > 3600) { 
h = parseInt (second / 3600); 
second = second - h * 3600; 
} 
if(second > 60) { 
m= parseInt (second / 60); 
second = second - m * 60; 
s = second; 


} 


} 
function stopCount () { 
clearTimeout (timeout); 
} 
function full(t) { 
EtE < TOY 
A le 
J 
return t; 
} 
</script> 
<style type="text/css"> 
input { 
background-color: #FFFFFF; 
width: 80px; 
border: lpx ridge #000000; 
} 


在 浏览 器 中 打开 js5.html， 单 击 “ 开 始 计 时 ”按钮 ， 
计时 ”按钮 ， 计 时 会 停止 ， 再 单 


所 示 。 


Porsrn CoA 下 二 全 太 


type="button" value=" 开 始 计 时 ”onClick="timecount () "” />&nbsp; 


</style> 
</head> 
<body> 
<input 
gnbsp; 
<input type="text" id="time" />&nbsp;&nbsp; 
<input type="button" value=" 停 止 计时 " onclick="stopCcount()" /> 
</body> 
</html> 


会 显示 计时 的 时 间 ; 单 击 “ 停 止 


“开始 计时 ”按钮 ， 会 继续 计时 。 其 显示 效果 如 图 12-6 
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/Dn 使 用 window x WW 


c 0 [Ooom | 


[开始 计时 | [00:00:11 停止 计时 | 


图 12-6 js5.html 的 显示 结果 


2) setInterval() 方 法 和 clearInterval() 方 法 
setInterval() 方 法 可 以 根据 指定 的 周期 (以 毫秒 计 ) 来 调用 JavaScript 代码 或 函数 。 
使 用 格式 如 下 : 


setInterval (codes, millisec) ; 
其 中 ，codes 和 millisec 参数 的 含义 与 setTimeout() 方 法 的 参数 相同 。 
clearInterval() 方 法 可 以 取消 由 setInterval0 方 法 指定 的 计时 对 象 。 其 语法 格式 如 下 : 
clearInterval (interval) ; 
其 中 ，interval 为 计时 对 象 的 名 称 。 
setInterval() 方 法 和 clearInterval() 方 法 的 使 用 示例 可 参照 js6.html， 实 现 与 js5.html 功能 
相同 的 计时 器 。 
和 6 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 window 的 setInterval () 方 法 和 clearInterval () 方 法 实现 计时 器 
</title> 
<script type="text/javascript"> 
var count = 0; 
var interval; 
function timeCount() { 
document .getElementById ("time") .value = timeChange (count); 
Count++; 
} 
function beginCount() { 
interval = setInterval ("timeCount()", 1000); 
} 
function timeChange (second) { 
var h= 0, 


m= 0, 


.= 0 
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535= second; 
if(second > 3600) { 
h = parseInt (second / 3600); 
second = second - h * 3600; 
} 
if(second > 60) { 
m= parseInt (second / 60); 
second = second ~- m * 60; 
5s = second; 
} 
roturn ial ET sm full 
} 
function stopCount () { 
clearIinterval (interval); 
} 
function full(t) { 
ENE CULO 
2 


return t; 
} 
</script> 
<style type="text/css"> 
input { 


background-color: #FFFFFF; 
width: 80px; 
border: lpx ridge #000000; 
} 
</style> 
</head> 
<body> 
<input type="button" value=" 开 始 计 时 " onClick="beginCount()" />gnbsp; 
&nbsp7 
<input type="text" id="time" />&nbsp;snbsp; 
<input type="button" value=" 停 止 计时 " onclick="stopcount()" /> 
</body> 
</html> 


在 浏览 器 中 打开 js6.html， 其 实现 的 功能 与 js5.html 相同 ， 其 显示 效果 与 图 12-6 相同 。 
可 见 , 对 于 setInterval0 方 法 来 说 , 不 需要 递归 调用 , 只 需要 指定 调用 的 函数 名 及 间隔 的 时 间 。 


(23 document 对 象 


当 创 建 了 一 个 网 页 并 把 它 加 载 到 浏览 器 中 时 ， 网 页 文档 就 被 转换 成 一 个 文档 对 象 
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document。 在 DOM 中 ， 一 个 document 对 象 被 表示 为 一 棵 树 ， 也 称 为 节点 树 。 文 档 是 节点 
构成 的 集合 ， 节 点 主要 包括 元 素 节 点 〈element node)、 文 本 节点 (text node)、 属 性 节点 
(attribute node) 以 及 层 二 样式 表 (CSS) 等 。 元 素 节点 指 的 是 包含 在 HTML 文档 中 的 标签 
元 素 。 文 本 节点 指 的 是 被 包含 在 元 素 节点 内 部 的 文本 ， 但 是 不 一 定 所 有 的 元 素 节点 都 包含 
文本 节点 。 属 性 节点 一 般 被 放 署 在 元 素 节点 的 起 始 标签 内 部 ， 所 有 的 属性 节点 都 被 包含 在 
元 素 节点 内 部 ， 元 素 节点 也 不 一 定 包含 属性 节点 。 如 果 没 有 属性 节点 ， 则 元 素 节点 的 显示 
样式 由 CSS 或 者 浏览 器 的 默认 样式 决定 。CSS 也 是 DOM 中 的 一 类 节点 ，CSS 决定 了 元 素 
节点 的 显示 样式 。document 对 象 的 层次 结构 如 图 12-7 所 示 。 


文档 document 


根 节点 <hml> 
I 
[ 
元 素 <head> 元 素 <body> 
| = 
元 素 <tite> 元 素 <a> 元 来 n> | 
文本 文本 文本 


图 12-7 document 对 象 的 层次 结构 图 


1. document 对 象 的 属性 
document 对 象 提供 了 一 系列 的 只 读 或 可 读 写 的 属性 ， 如 表 12-9 所 示 。 


表 12-9 document 对 象 的 属性 


属性 说 明 

title 设置 或 获取 文档 的 标题 

bgColor 设置 或 获取 文档 的 背景 色 

feColor 设置 或 获取 文档 的 前 景色 

linkColor 设置 或 获取 文档 的 链接 的 颜色 
alinkColor 设置 或 获取 文档 的 活动 链接 的 颜色 
vlinkColor 设置 或 获取 文档 的 已 访问 过 的 链接 的 颜色 
URL 设置 或 获取 文档 的 URL 

charset 设置 或 获取 文档 的 字符 集 

cookie 设置 或 获取 与 当前 文档 相关 的 cookie 
domain 获取 当前 文档 的 域名 ， 只 读 属性 
lastModified 获取 当前 文档 的 最 后 修改 的 日 期 时 间 ， 只 读 属性 
Teferrer 获取 载 入 当前 文档 的 URL， 只 读 属性 
fileSize 获取 当前 文档 的 大 小 ， 只 读 属 性 

body 获取 当前 文档 的 主体 子 对 象 ， 只 读 属 性 


1) bgColor 属性 
在 JavaScript 中 ， 可 以 通过 修改 bgColor 的 属性 值 来 更 改 当 前 文档 的 背景 颜色 。 例 如 ， 
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js7.html。 
js7.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>document 对 象 的 bgcolor 属性 </title> 
</head> 
<body bgColor="orange"> 
<input type="button" value=" 把 背景 色 改 为 红色 " onclick="document. 
bgColor='red';" /> 
<br /><br /> 
<input type="button" value=" 把 背景 色 改 为 绿色 "onclick="document. 
bgColor='green';" /> 
<br /HS><bE /> 
<input type="button" value=" 把 背景 色 改 为 蓝 色 " onclick="document. 
bgColor='blue';" /> 
<br /><br /> 
</body> 
</html> 


js7.html 的 显示 结果 如 图 12-8 所 示 ， 当 单 击 按钮 时 , 文档 的 背景 色 会 发 生 相应 的 改变 。 


D document 对 条 的 bg x \Wo>> 
四 oooo- 广 国 


把 背景 色 改 为 红色 
把 背景 色 改 为 绿色 


把 背景 色 改 为 蓝 色 


12-8 js7.html 的 显示 结果 


2) linkColor、alinkColor 与 vlinkColor 属性 

linkColor、alinkColor 与 vlinkColor 可 以 设置 超级 链接 在 不 同 的 状态 下 的 颜色 ， 其 使 用 
示例 如 js8.html 所 示 。 

jsg html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
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<title>document 的 1inkColor、alinkColor 与 VlinkColor 属性 </title> 
<script type="text/javascript"> 
document .linkColor = "red"; 
document .alinkColor = "green"™; 
document .vlinkColor = "blue"; 
</script> 
</head> 
<body> 
<a href="#"> 超 级 链接 1</a><br /> 
<a href="#"> 超 级 链接 2</a><br /> 
<a href="#"> 超 级 链接 3</a><br /> 
<a href="#"> 超 级 链接 4</a> 
</body> 


</html> 


在 正 浏 览 器 中 打开 js8.html， 当 链接 1 与 链接 3 被 访问 过 ， 链 接 2 被 激活 时 的 显示 结 
果 如 图 12-9 所 示 。 


(2 document 的 linkColor... 回回 因 


多时 


超级 链接 1 
超级 链接 2 


4 My Computer #a ~ 续 100% 
图 12-9 js8.html 的 显示 结果 


注意 : 各 个 浏览 器 对 document 的 linkColor、alinkColor、vlinkColor 兼容 性 并 不 好 ， 因 
此 应 尽量 避免 直接 使 用 这 几 个 属性 ， 可 以 使 用 CSS 中 的 伪 类 选择 器 来 代替 。 

3) Cookie 属性 

Cookie 是 某 些 站 点 在 客户 端的 本 地 硬盘 上 存储 的 一 些 很 小 的 文本 文件 ，JavaScript 中 
提供 了 对 Cookie 比较 全 面 的 访问 。 每 个 Cookie 都 是 Cookie 名 =Cookie 值 的 一 个 键 / 值 对 ， 
Cookie 本 身 是 一 个 字符 串 ， 多 组 键 值 对 之 间 使 用 分 号 加 空格 分 隔 。 例 如 : 


namel = valuel; name2 = Value2; name3 = value3; 


每 个 Cookie 都 有 失效 日 期 ， 一 旦 到 了 失效 日 期 ，Cookie 就 会 被 删 掉 。 在 JavaScript 中 
虽然 不 能 直接 删 掉 Cookie， 但 是 可 以 通过 设 定 失效 日 期 的 办 法 来 间接 删 掉 Cookie。 
每 个 站 点 或 网 页 都 有 自己 的 Cookie， 而 这 些 Cookie 也 只 能 由 当前 的 站 点 和 网 页 来 访 


xy 
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问 ， 


其 他 的 站 点 或 网 页 在 未 经 授权 的 情况 下 不 能 访问 。Cookies 一 般 都 有 规定 的 大 小 ， 一 


且 超 过 了 规定 的 大 小 ， 最 早 的 Cookie 会 被 删除 ， 以 便 存储 新 的 Cookie。 


其 中 ， 


b 


设置 Cookie 的 方法 如 下 : 
document .cookie = sCookie; 


sCookie 是 要 保存 的 Cookie 的 值 ， 主 要 包括 以 下 内 容 : 

键 / 值 对 ， 每 个 Cookie 都 有 包含 实际 信息 的 键 / 值 对 ， 读 取 时 可 以 按照 名 字 匹 配 。 
expires 为 过 期 时 间 ， 一 旦 到 达 过 期 时 间 ，Cookie 就 会 被 删除 。 如 果 没 有 设 定 过 期 时 
间 , 则 浏览 器 关闭 后 立即 过 期 。 过 期 时 间 是 UTC 格式 , 可 以 利用 Date.toGMTString() 
方法 来 创建 此 格式 的 时 间 。 

path 为 路 径 ， 在 此 路 径 下 的 页 面 才 可 以 访问 Cookie， 一 般 设 为 “/”， 表 示 同 一 个 站 
点 下 的 所 有 的 页 面 都 可 以 访问 Cookie。 

domain 为 域 ， 每 个 Cookie 都 可 以 包含 域 ， 域 可 以 使 浏览 器 确定 哪些 Cookie 需要 被 
提交 。 如 果 不 指 定 域 ， 则 域 值 为 设 定 Cookie 的 页 面 的 域 。 

secure 为 安全 性 , 指定 Cookie 是 否 只 能 通过 HTTP 协议 访问 。 如 果 设 置 了 secure 值 ， 
则 只 有 使 用 HTTP 协议 才能 访问 Cookie。 

例如 ， 以 下 为 设置 Cookie 的 一 段 代码 : 

var date = new Date(); 

date.setMonth (date.getMonth ()+1); // 一 个 月 后 过 期 


document .cookie = "username=" + encodeURI ("username") + ";expires=" + date. 
toGMTString() + "; path=/"; 


2. document 对 象 的 方法 
document 对 象 的 方法 如 表 12-10 所 示 。 


表 12-10 document 对象 的 方法 


方法 说 明 

write() 向 文档 页 面 输出 内 容 

writeln() 分 行 向 文档 页 面 输出 内 容 
getElementById() 根据 id 返回 文档 的 第 一 个 对 象 的 引用 
getElementsByName() 根据 name 返回 文档 的 对 象 集合 
getElementsByTagName() 根据 标签 名 返回 文档 的 对 象 集合 


1) getElementById(0) 方 法 


getElementById( 方 法 用 于 通过 元 素 的 id 访问 该 元 素 , 这 是 在 DOM 编程 中 经 常 使 用 的 
方法 。 如 果 在 页 面 中 存储 多 个 id 值 相 同 的 元 素 ， 此 方法 会 按照 元 素 在 页 面 中 出 现 的 顺序 返 
回 第 一 个 符合 条 件 的 id。 在 操作 页 面 文档 时 ， 最 好 给 每 个 元 素 指定 一 个 唯一 的 id 值 , 可 以 
根据 id 值 操作 此 元 素 。getElementById0 方 法 的 使 用 示例 可 参照 js9.html。 

js9 html: 


<!DOCTYPE html> 
<html> 


第 12 章 DOM 编程 9 


<head> 
<meta charset="utf-8" /> 
<title>document 对 象 的 getElementById() 方 法 </title> 
</head> 
<body> 
<input type="text" id="myid" value=" 这 是 单行 文本 框 " /><br /> 
<div id="myid"> 这 是 第 一 个 DIV</div><br /> 
<div id="myid"> 这 是 第 二 个 DIV</div><br /> 
<script type="text/javascript"> 
Var element = document .getElementById ("myid"); 
document .write ("nodeName=" + element .nodeName + "<br />"); 
</script> 
</body> 
</html> 


js9.html 的 显示 结果 如 图 12-10 所 示 。 


D documentyss x We 
CGC 全 |©127.0018.. 食 


这 是 单行 文本 框 
这 是 第 一 个 DIV 


这 是 第 二 个 DIV 


nodeName=INPUT 


图 12-10 js9.html 的 显示 结果 


2) getElementsByName() 方 法 

getElementsByName() 方 法 用 于 根据 元 素 的 name 属性 值 获取 符合 条 件 的 元 素 的 对 象 集 
合 。 此 方法 一 般 用 于 单行 文本 框 、 单 选 框 、 复 选 框 等 具有 name 属性 的 元 素 对 象 。 由 于 DIV 
没有 name 属性 ， 所 以 不 可 以 使 用 此 方法 获取 DIV。 其 使 用 示例 可 参照 js10.html。 

js10.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>document 对 象 的 getElementsByName () 方 法 </title> 
</head> 
<body> 
<div name="div"> 这 是 第 一 个 DIV</div> 
<input type="text" name="text" value=" 这 是 第 一 个 文本 框 "” /> 
<div name="div"> 这 是 第 二 个 DIV</div> 
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<input type="text" name="text" value=" 这 是 第 二 个 文本 框 " /> 
<div name="div"> 这 是 第 三 个 DIV</div> 
<input type="text" name="text" value=" 这 是 第 三 个 文本 框 " /> 
<script type="text/javascript"> 
var divs = document .getElementsByName ("div"); 
Var texts = document .getElementsByName ("text"); 
document .write ("<br />div 的 个 数 为 : " + divs.length + "<br />"); 


document .write ("text 的 个 数 为 : " + text.length); 
</script> 


</body> 
</html> 


js10.html 的 显示 结果 如 图 12-11 所 示 。 


r 


ely 
DD document x 人 
GCG 合 10 127.001:8.， 食 
这 是 第 一 个 DIV 
这 是 第 一 个 文本 框 
这 是 第 二 个 DIV 
这 是 第 二 个 文本 框 
这 是 第 三 个 DIV 
这 是 第 三 个 文本 框 
div 的 个 数 为 ，3 


图 12-11 js10.html 的 显示 结果 


从 js10.html 的 显示 结果 可 以 看 出 ,无 法 通过 getElementsByName() 方 法 获取 DIV 对 象 。 
3) getElementsByTagName() 方 法 
getElementsByTagName() 方 法 用 于 根据 元 素 的 标签 名 称 来 获取 对 象 的 集合 ， 当 参数 为 
“*” 时 ， 会 返回 当前 页 面 中 所 有 的 标签 元 素 。 此 方法 按照 元 素 在 文档 中 出 现 的 顺序 返回 元 
素 对 象 。 作 为 元 素 标签 名 称 的 字符 串 参 数 可 以 不 区 分 大 小 写 。getElementsByTagName() 的 
使 用 方法 可 参照 js11.html。 
js11.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 


<title>document 对 象 的 getElementsByTagName () 方 法 </title> 
</head> 
<body> 
<input type="text" value=" 第 一 个 文本 框 " /><br /> 
<div> 第 一 个 DIV</div> 
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<input type="text" value=" 第 一 个 文本 框 " /><br /> 

<div> 第 二 个 DIV</div> 

<input type="text" value=" 第 一 个 文本 框 " /><br /> 

<div> 第 三 个 DIV</div> 

<input type="text" value=" 第 一 个 文本 框 " /><br /> 

<script type="text/javascript"> 
var input = document .getElementsByTagName ("input"); 
var div = document .getElementsByTagName ("div"); 
document .write ("TagName 为 input 的 元 素 的 个 数 为 : " + input.length + 
xb rN 
document .write ("TagName 为 div 的 元 素 的 个 数 为 : " + div.length); 

</script> 

</body> 
</html> 


jsl1.html 的 显示 结果 如 图 12-12 所 示 。 


| 


C 全 |0 127001802. 廊 | : 


了 第 一 个 文本 框 


TagName 为 input 的 元 素 的 个 数 为 - 4 
TagName 为 div 的 元 素 的 个 数 为 ， 


图 12-12 js11.html 的 显示 结果 


3. 表单 对 象 

表单 对 象 是 document 对 象 的 子 对 象 ， 表 单 是 和 JavaScript 交互 时 最 常用 的 对 象 之 一 。 
利用 表单 收集 客户 端的 信息 , 并 且 可 以 将 信息 提交 给 服务 器 处 理 。 通常 可 以 使 用 JavaScript 
来 对 表单 进行 一 些 预 处 理 ， 例 如 表单 数据 的 合法 性 校 验 等 。 表 单 是 页 面 构成 的 基本 元 素 ， 
一 个 页 面 可 以 包含 一 个 或 多 个 表单 。 页 面 中 的 表单 可 以 通过 表单 名 称 或 者 表单 的 索引 来 访 
问 ， 例 如 : 

document .表单 名 称 


或 者 : 


document . forms [index] 


在 JavaScript 中 引用 表单 时 ， 必 须 先 在 页 面 中 用 标识 创建 表单 ， 然 后 再 进行 引用 ， 即 
引用 必须 在 表单 创建 之 后 。 


XY 
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1) 表单 对 象 的 属性 和 方法 
表单 对 象 的 属性 说 明 如 表 12-11 所 示 。 


表 12-11 表单 对 象 的 属性 


属性 说 明 

acceptCharset 服务 器 可 以 接受 的 字符 集 

action 设置 或 获取 表单 的 处 理 程序 

enctype 设置 或 获取 表单 用 来 编码 的 MIME 类 型 ， 此 属性 的 默认 值 为 
"application/x-www-form-urlencoded" 

id 设置 或 获取 表单 的 id 

name 设置 或 获取 表单 的 name 

method 设置 或 获取 表单 的 数据 提交 到 服务 器 的 方法 ， 可 取 值 为 GetlPost， 默 认 值 为 
Get 

target 设置 或 获取 表单 提交 结果 的 目标 名 称 

length 获取 表单 中 所 包含 的 元 素数 目 ， 只 读 属 性 

elements[index] 根据 索引 获取 表单 中 的 元 素 


表单 对 象 的 方法 说 明 如 表 12-12 所 示 。 
表 12-12 表单 对 象 的 方法 


方法 说 明 
handleEventO 使 事件 处 理 程 序 生效 
reset() 


submit() 


2) 表单 的 元 素 

表单 可 以 包含 很 多 表单 元 素 ， 一 般 为 表单 中 的 控件 ， 例 如 文本 框 、 密 码 框 、 按 钮 、 单 
选 按钮 、 复 选 框 、 多 行文 本 框 等 。 可 以 使 用 以 下 格式 访问 表单 中 的 元 素 的 属性 和 方法 : 

document . forms [索引 ] .elements [索引 ] .属性 

document .forms [索引 ] .elements [索引 ] .方法 (参数 ) 


或 者 : 

document .表单 名 称 .元 素 名 称 .属性 

document .表单 名 称 .元 素 名 称 .方法 (参数 ) 

表单 元 素 的 属性 一 般 包括 value (元 素 的 默认 value 值 )、 form (元 素 所 在 的 表单 )、name 
(元 素 的 name 值 )、type( 元 素 的 类 型 )。 表 单元 素 的 方法 一 般 包括 blur()、select()、focus() 
等 。 表 单元 素 的 使 用 可 参照 js12.html， 当 表单 元 素 获得 焦点 或 失去 焦点 时 更 改 其 样式 。 

js12.html: 


<html> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title> 表 单元 素 </title> 
<script> 
function getFocus (obj){ 
obj.style.color="red"; 
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obj.style.background="#FFE4C4"; 
} 
function getBlur (obj){ 
obj.style.color="blue"; 
obj.style.background="#DCDCDC"; 
} 
</script> 
</head> 
<body> 
用 户 名 : <input type="text" onFocus="getFocus (this)" onBlur="getBlur (this)"/> 
<br/> 
密码 : <input type="password" onFocus="getFocus (this)" onBlur="getBlur 
(this)"/> 
</body> 
</html> 


在 浏览 器 中 打开 js12.html， 当 密码 框 获得 焦点 时 的 显示 效果 如 图 12-13 所 示 。 


中 雪 间 元 素 
C 合 10 127.0018.，o 父 


用 户 名 ， wangmingming 
密码 : FF 


12-13 ”js12.html 的 显示 结果 


表单 元 素 的 另 一 个 使 用 示例 可 参照 js13.html。 表 单元 素 的 事件 和 属性 结合 使 用 模拟 输 
入 符合 一 定格 式 的 信用 卡号 。 在 页 面 上 设置 4 个 文本 框 ， 每 个 文本 框 只 能 输入 4 位 数字 ， 
前 一 个 文本 框 输入 完成 后 ， 焦 点 自动 移 到 下 一 个 控件 上 。 当 单 击 “ 显 示 ” 按 钮 时 ， 显 示 完 
整 的 信用 卡号 。 

js13 .html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 表 单 对 象 元 素 的 属性 和 方法 的 使 用 </title> 
<script type="text/javascript"> 
var i = 0; 
function movenext (obj, i) { 
if(obj.value.length == 4) { 


document .forms [0] .elements[i + 1].focus(); 


x 
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} 
function show() { 
form = document .forms[0]; 
num = form.elements [0] .value + form.elements [1] .value + 
form.elements[2] .value + form.elements[3] .value; 
alert ("你 输入 的 信用 卡号 码 是 "+ num); 
} 
function test(obj) { 
if(/\D/.test(obj.value)) { 
alert (' 只 能 输入 数字 ') ; 


obj.value = "''; 


} 
</script> 
</head> 
<body onLoad="document .forms [0] .elements[i].focus()"> 
请 输入 你 的 信用 卡号 码 : 
<form> 
<input type="text" size="3" maxlength="4" onKeyup="test (this); 
movenext (this,0)" /> -— 
<input type="text" size="3" maxlength="4" onKeyup="test (this); 
movenext (this,1)" /> - 
<input type="text" size="3" maxlength="4" onKeyup="test (this); 
movenext (this,2)" /> - 
<input type="text" size="3" maxlength="4" onKeyup="test (this); 
movenext (this,3)" /> 
<input type="button" value=" 显 示 " onClick="show()" /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 js13.html， 文 本 框 中 只 能 输入 数字 ， 其 显示 结果 如 图 12-14 所 示 。 
国 攻 | 


| 中 表单 对 象 元 素 的 层 作 X 
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请 输入 你 的 信用 卡号 码 : 


1234 |-|5678 |-|9012 -|3456 


12-14 js13.html 的 显示 结果 


当 单 击 “ 显 示 ” 按 钮 时 ， 其 显示 结果 如 图 12-15 所 示 。 


第 12 章 “DOM 编程 


Message from webpage 


A、 人 二 入 的 信用 卡号 码 时 1234567890123456 


图 12-15 单 击 “ 显 示 ” 按 钮 之 后 的 显示 结果 


《25 history 对 象 


history 对 象 也 称 为 历史 对 象 ， 用 来 存储 客户 端 浏览 器 窗口 最 近 浏 览 过 的 网 址 。 通 过 
history 对 象 ， 可 以 完成 类 似 浏 览 器 窗口 前 进 、 后 退 等 按钮 的 功能 。 

1. history 对 象 的 属性 

history 对 象 只 有 一 个 属性 ，history.length 表示 存储 在 记录 清单 中 的 url 数量 。 

2. history 对 象 的 方法 

history 对 象 的 方法 如 表 12-13 所 示 。 


表 12-13 history 对 象 的 方法 


方法 说 明 

backO 加 载 history 列表 中 的 前 一 个 url 

forwardO 加 载 history 列表 中 的 下 一 个 url 

go(n) 加 载 history 列表 中 的 某 一 个 url。 如 果 n<0， 则 后 退 n 个 地 址 ， 如 果 n>0， 则 前 进 n 


个 地 址 ; 如 果 n=0， 则 刷新 当前 页 面 


history 对 象 方法 的 使 用 示例 可 参照 js14.html。 
js14 html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>history 对 象 的 属性 和 方法 的 使 用 </title> 
<script type="text/javascript"> 
function go() { 
Var n = parseInt (document .getElementById ("param") .value); 
if(isNaN(n)) { 
alert ("请 输入 跳 转 的 参数 ， 必 须 是 整数 ! ") ; 
document .getElementById ("param") .value = ""; 
} else { 


window.history.go(n); 
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} 

</script> 

</head> 

<body> 
<input type="button" value=" 后 退 " onClick="window.history.back()" /> 
&nbsp7 
<input type="button" value=" 前 进 " onClick="window.history.forward()" /> 
&nbsp7 
<input type="button" value="Go" onClick="go()" />&nbsp; 
<input type="text" value="0" id="param" size="]1" /> 

</body> 

</html> 


在 浏览 器 中 打开 js14.html 的 显示 结果 如 图 12-16 所 示 ， 单 击 相应 的 按钮 ， 可 以 实现 对 
浏览 器 历史 记录 的 访问 。 有 些 浏览 器 出 于 安全 考虑 ， 不 允许 保存 历史 记录 。 如 果 历 史记 录 
不 可 利用 ， 则 页 面 的 url 不 变化 。 


D hitooxisii x .| 
| C 侣 1012270018. 衣 | : | 


后 | [前 进 | [Soj [0 


图 12-16 js14.html 的 显示 结果 


《25 location 对 象 


location 对 象 提供 了 关于 当前 打开 窗口 或 者 特定 框架 的 url 信息 。 一 个 多 框架 的 窗口 对 
象 的 location 对 象 显示 的 是 父 窗口 的 url， 每 个 框架 都 有 一 个 与 之 关联 的 location 对 象 。 
location 对 象 是 window 对 象 和 document 对 象 的 属性 ， 也 可 以 看 作 是 window 对 象 和 
document 对 象 的 子 对 象 。 

1. location 对 象 的 属性 

location 对 象 的 属性 如 表 12-14 所 示 。 

表 12-14 location 对 象 的 属性 


属性 说 明 属性 说 明 

host 网 页 主机 名 和 端口 pathname url 的 路 径 名 部 分 
hash 锚 点 名 称 protocol 当前 使 用 的 协议 名 
href 窗口 对 象 的 整个 ul 字符 串 port 端口 号 


例如 ， 可 以 通过 documentlocation hre 全 http:/www.sohu.com 将 当前 的 浏览 器 链接 到 搜 
狐 网 站 。location 对 象 属性 的 使 用 方法 可 参照 js15.html， 通 过 按钮 更 改 当 前 文档 的 url。 
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js15.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>location 对 象 的 使 用 </title> 
</head> 
<body> 
<input type="button" value=" 跳 转 到 js1l4.html" onClick="document . 
location.href="'jsl4.html'" /> 
</body> 
</html> 


js15.html 的 显示 结果 如 图 12-17 所 示 , 单 击 “ 跳 转 到 js14.html ”按钮 ,会 跳 转 到 js14.html 
页 面 。 在 页 面 js14.html 中 单 击 “ 后 退 ” 按 钮 又 回 到 js15.html 页 面 。 


/hn location 对 条 的 x WU 


GC 全 |0127oo18. | : 
跳 转 到 js14.html 


图 12-17 js15.html 的 显示 结果 
2. location 对 象 的 方法 
location 对 象 的 方法 如 表 12-15 所 示 。 

表 12-15 location 对 象 的 方法 


方法 说 明 

assign() 将 location 对 象 的 url 属性 设置 成 参数 url 
reload0 页 面 重新 载 入 

replace() 用 参数 给 出 的 网 址 替换 当前 网 址 


(127 事件 的 应 用 


12.7.1 鼠标 事件 


当 鼠 标 移动 到 元 素 上 方 时 会 触发 onMouseOver 事件 ， 当 鼠标 移出 元 素 时 会 触发 
onMouseOut 事件 ， 当 鼠标 在 元 素 上 方 移动 时 会 触发 onMouseMove 事件 。 例 如 ,js16.html， 
当 鼠 标 在 页 面 文档 区 域 移动 时 ， 在 页 面 上 显示 鼠标 的 坐标 信息 。 

和 ai 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 鼠 标 事件 示例 1</title> 
<style type="text/css"> 
body { 
background-color: #F5F5F5; 
font-size: 14px; 
} 
div { 
color: reds 
font-size: 16px; 
height: 300px; 
width: 200px; 
} 
</style> 
<script type="text/javascript"> 
function show() { 
var str = "鼠标 的 位 置 为 : <br />Xx=" + event.x + ",Y=" + event.y; 


document .getElementById ("msg") .innerHTML = str;; 
} 
</script> 
</head> 
<body onMouseMove="show()"> 
<div id="msg"></div> 
</body> 
</html> 


js16.html 的 显示 结果 如 图 12-18 所 示 ， 当 鼠标 在 文档 区 域 移动 时 ， 其 坐标 位 置 会 显示 
在 文档 区 域 上 。 


le 
区 口 筷 标 事件 示例 1 x 司 
廊 | : | 


CG 全 [O1270018.. 女 


鼠标 的 位 置 为 ， 
X=241.Y=79 


12-18 js16.html 的 显示 结果 


例如 ，js17.html， 当 把 鼠标 移 到 小 图 上 时 ， 可 以 显示 对 应 的 大 图 。 
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js17 .html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 鼠 标 事件 示例 2</title> 
</head> 
<body> 
<div align="center"> 
<img src="image/01.jpg" width="300" height="200" id="large" /> 
</div> 
<table border="0" cellspacing="5" cellpadding="5" align="center"> 
<tr> 
<td><img src="image/01.jpg" width="60" height="40" 
onMouseOver="document .getElementById('large') .src='image/ 
0109590 /></ta> 
<td><img src="image/02.jpg" width="60" height="40" 
onMouseOver="document .getElementById('large') .src='image/ 
02.jpg';" /></td> 
<td><img src="image/03.jpg" width="60" height="40" 
onMouseOver="document .getElementById('large') .src='image/ 
03J pg > /></Ed> 
<td><img src="image/04.jpg" width="60" height="40" 
onMouseOver="document .getElementById('large') .src='image/ 
04.jpg';" /></td> 
jE 
</table> 
</body> 
</html> 


js17.html 的 显示 结果 如 图 12-19 所 示 。 当 把 鼠标 移 到 小 图 上 时 ， 上 方 的 大 图 会 发 生 相 
应 的 改变 。 


12.7.2 ”键盘 事件 


JavaScript 中 的 键盘 事件 主要 有 onKeyDown、onKeyPress 和 onKeyUp 3 种 。 一 个 典型 
的 按键 动作 会 依次 触发 onKeyDown、onKeyPress、onKeyUp 事件 。 在 这 3 种 事件 中 ， 
onKeyDown 和 onKeyUp 是 比较 接近 于 底层 硬件 的 事件 ， 可 以 捕获 到 用 户 散 击 的 键 。 而 
onKeyPress 是 较为 高 级 的 事件 ， 可 以 返回 一 个 可 打印 的 键 对 应 的 字符 。 

键盘 中 的 键 可 以 分 为 字符 键 和 功能 键 。 只 有 当 键 盘 上 的 字符 键 被 按 下 并 且 释 放 时 才 可 
以 触发 onKeyPress 事件 ， 即 当 按 下 并 释放 功能 键 时 ， 并 不 能 触发 onKeyPress 事件 ， 因 为 
功能 键 不 能 打印 输出 。 


XY 
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mh = 四 四 


图 12-19 js17.html 的 显示 结果 


当 事 件 处 理 程序 被 调用 时 ， 一 个 event 对 象 会 被 传递 ，event 对 象 的 属性 包括 了 事件 
的 细节 描述 ， 例 如 事件 的 类 型 及 发 生 事件 的 元 素 等 。 常 用 的 event 对 象 的 属性 如 表 12-16 
所 示 。 

表 12-16 event 对 象 的 常用 属性 


属性 说 明 

charCode 引发 事件 的 可 打印 字符 的 Unicode 编码 ， 与 浏览 器 和 事件 相关 

ctriKey 事件 发 生 时 Ctrl 键 是 否 按 下 

altKey 事件 发 生 时 Alt 键 是 否 按 下 

shiftKey 事件 发 生 时 Shift 键 是 否 按 下 

keyCode 按 下 键 的 实际 的 编码 ， 正 支持 

offsetX, offsetY 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 x 坐标 和 y 坐标 ， 正 支持 
X,y 事件 发 生 的 位 置 的 x 坐标 和 y 坐标 ， 正 支持 


onKeyPress 事件 不 能 对 功能 键 进行 正常 的 响应 ，onKeyDown 和 onKeyUp 可 以 对 功能 
键 及 字符 键 进行 正常 的 响应 。 但 是 响应 事件 返回 的 属性 值 不 相同 。onKeyPress 事件 的 
keyCode 区 分 字母 的 大 小 写 ， 而 onKeyDown 和 onKeyUp 事件 的 keyCode 不 区 分 字母 的 大 
小 写 , 即 无 法 区 分 用 户 按 下 的 是 大 写字 母 还 是 小 写字 母 。 另 外 , onKeyPress 事件 的 keyCode 
无 法 区 分 主键 盘 上 的 数字 键 和 数字 键盘 上 的 数字 键 ， 而 onKeyDown 和 onKeyUp 可 以 区 分 

> 

此 外 ，event 事件 的 属性 和 浏览 器 与 事件 相关 ， 可 以 通过 event keyCode 获取 按 下 键 的 
编码 。 

例如 ，js18.html， 当 用 户 按 下 键盘 上 的 字符 键 时 ， 在 DIV 中 显示 用 户 按 下 的 字符 。 

jslg html: 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 键 盘 事 件 示例 1</title> 
<script> 
function showChar() { 
document .getElementById ("char") .innerHTML = String. 
fromCharCode (event .keyCode); 
} 
</script> 
<style type="text/css"> 
div { 
background-color: Yellow; 
width: 90px; 
height: 120px; 
font-size: 100px; 
font-weight: bold; 
color: red; 
} 
</style> 
</head> 
<body onKeyPress="ShowChar () "> 
<div id="char"></div> 
</body> 
</html> 


当 按 下 大 写字 母 A 时 , js18.html 的 显示 结果 如 图 12-20 所 示 。 按 下 其 他 的 字符 键 , DIV 
中 的 字符 会 随 之 变化 。 


ET 


y OD 键盘 事件 示例 1 x Ws 


GO ©1270018.. 人 女 | : | 


A 


图 12-20 js8.html 的 显示 结果 


注意 : 可 以 使 用 String fromCharCode(eventkeyCode) 来 获取 onKeyPress 事件 触发 下 的 
按键 对 应 的 字符 。 如 果 浏 览 器 不 同 ， 以 上 代码 可 能 需要 更 改 。 读 者 可 自行 修改 成 兼容 各 类 
浏览 器 的 代码 。 

可 以 利用 功能 键 结合 其 按 下 时 触发 的 事件 来 控制 DIV 的 位 置 ， 例 如 ，js19.html， 在 
DIV 中 放置 一 幅 图 像 ， 可 以 通过 按 下 键盘 上 的 方向 键 来 移动 图 像 。 
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js19.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 键 盘 事 件 示例 2</title> 
<script type="text/javascript"> 
function move (event) { 
var div = document .getElementById ("div"); 
Var key = event.keyCode; 
if(key == 37) { 
// 向 左 移动 
div.style.left = parseInt (div.style.left) - 10 + "px"; 
} else if(key == 38) { 
// 向 上 移动 
div.style.top = parseInt (div.style.top) - 10 + "px"; 
} else if(key == 39) { 
// 向 右 移 动 
div.style.left = parseInt (div.style.left) + 10 + "px"; 
} else if(key == 40) { 
// 向 下 移动 
div.style.top = parseInt (div.style.top) + 10 + "px"; 


} 
</script> 
</head> 
<body onKeyDown="move (event)"> 
<div id="div" style="position:absolute;left:200px;top:100px"> 
<img src="image/05.jpg" /> 
</div> 
</body> 
</html> 


在 本 例 中 没有 考虑 图 像 超过 文档 区 域 边界 的 问题 ， 另 外 ， 也 没有 考虑 到 各 类 浏览 器 的 
兼容 问题 。 读 者 可 以 自行 修改 。 另 外 ， 需 要 注意 在 更 改 DIV 的 位 置 时 需要 标明 单位 px， 
否则 无 法 正确 修改 DIV 的 位 置 。 


(12.8 网 页 特效 


在 进行 网 页 开发 时 ， 经 常 需要 用 到 一 些 网 页 特效 ， 例 如 省 市 级 联 的 下 拉 列表 、 浮 动 广 
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告 窗口 、 深 动 公告 等 。 


1. 省 市 级 联 的 下 拉 列 表 


章 DOM 编程 


例如 ， 在 js20.html 中 ， 页 面 中 的 两 个 下 拉 列 表 分 别 表 示 省 份 和 城市 ， 在 JavaScript 中 


定义 一 维 数组 pArray 表示 省 份 , 通过 一 维 数组 的 嵌 套 实现 二 维 数组 cArray， 


用 以 表示 城市 。 


cArray 与 pArray 存在 对 应 关系 。 在 页 面 初始 化 时 ， 将 pArray 内 的 选项 添 力 


到 表示 省 份 的 


下 拉 列 表 中 ， 当 其 选择 项 发 生 更 改 时 ， 动 态 地 填充 表示 城市 的 下 拉 列 表 的 选项 。 当 表示 城 


市 的 下 拉 列 表 的 选项 发 生 更 改 时 ， 在 页 面 上 显示 用 户 的 选择 结果 。 
js20.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Js 特效 -省 市 级 联 </title> 
<script> 
// 定 义 省 级 数组 ， 以 四 个 省 份 为 例 
Var pArray = new Array ("北京 "，" 上 海 "， "天津"，" 山 东 ")， 
// 定 义 市 级 数组 


Var cArray = new Array(); 


cArray[0] = new Array ("东城 "，" 西 城 "，" 崇 文 "，" 宣 武 "，" 朝 阳 "，" 丰 人 台 "， 
9 有 山海 演 7 中 间 关 沟 吕 房山 通州 中 庆 2 电大 并 


"平谷 "， "怀柔 "， "密云 "， "延庆 ") ; 
cArray[1] = new Array(" 黄 浦 "，" 卢 湾 "，" 徐 汇 "， "长 宁 "， "静安 


" 闻 北 "2 "是 加 杨浦" "交行 "7 宝山 "2 " 奖 定 "。 " 汀 东 "人 金山" 松 汪 号 


"青浦 "， "南汇 "， "奉贤 "， "崇明 ") ; 
cArray[2] = new Array ("和 平 "，" 东 丽 "，" 河 东 "，" 西 青 "，" 河 


9 南开" "路 友和 串讲 红 白 "2" 境 油 "和 


"静海 "，" 宝 垢 "，" 葡 县 ") ; 


cArray[3] = new Rrray(" 济 南 "，" 青 岛 "，" 淄 博 "，" 吏 庄 "， "东营 "， "烟台 "， 
"潍坊 "，" 济 宁 "， "泰安 "，" 威 海 "， "日照 "， "莱芜 "， "临沂 "， "德州 "， "聊城 "， 


"滨州 "， "菏泽 ") 
// 初 始 化 
function init() { 
// 获 取 province 下 拉 列 表 
Var province = document .getElementById ("province" 
// 将 pArray 的 值 添加 到 province 下 拉 列 表 的 选项 中 
for(var i = 0; i < pArray.length; i++) { 
Var option = document .createElement ("option") 
option.value = pArray[i]; 
option.text = pArray[il]; 
province.options.add (option); 
} 


s 
// 显 示 结果 


ee 


西 " 3 "津南 " 


); 


XY 
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function show() { 
Var province = document .getElementById("province"); 
Var city = document .getElementById("city"); 


// 获 取 用 户 选择 的 省 份 
Var pSelectedIndex = province.selectedIndex - 1; 
// 获 取 显 示 结 果 的 span 对 象 


Var result = document .getElementById ("result"); 
// 如 果 没 有 选择 省 份 ， 则 清空 显示 块 
if(pSelectedIndex < 0) { 
result .innerText = ""; 
} else { 
// 显 示 用 户 选 择 的 省 份 
result.innerText = pArrayl[pSelectedIndex]; 
// 获 取 用 户 选 择 的 城市 
Var cSelectedIndex = city.selectedIndex - 1; 
// 如 果 选 择 了 城市 ， 则 显示 城市 
if(cSelectedIndex >= 0) { 
result.innerText += ", " + CArray[pSelectedIndex] 
[cSelectedIindex]; 


} 
// 级 联 关系 
function selectProvince() { 
Var province = document .getElementById("province"); 
Var city = document .getElementById ("city"); 
Var pSelectedIndex = province.selectedIndex - 1; 
// 将 原来 的 城市 选项 清空 
for(var i = city.options.length - 1; i > 0; i--) { 
city.options .remove (i); 
上 
// 将 新 选择 的 省 份 对 应 的 城市 填充 到 city 下 拉 列 表 
if(pSelectedIndex >= 0) { 
for(var i = 0; i < cArray[pSelectedIndex] .length; i++) 
Var option = document.createElement ("option"); 
option.value = cArray[pSelectedIndex] [i]; 
option.text = cArray[pSelectedIndex] [i]; 
city.options.add (option); 


} 
// 显 示 选择 结果 
Show() > 

} 

// 初 始 化 下 列 拉 表 


</script> 
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</head> 
<body onLoad="init()" style="font-size:12px;"> 
<form> 
省 份 : 
<select id="province" onChange="selectProvince()"> 
<option value=""> 请 选择 省 份 </option> 
</select> 
<br /><br /> 城市 : 
<select id="city" onChange="show()"> 
<option value=""> 请 选择 城市 </option> 
</select> 
<br /><br /> 你 选择 的 结果 是 : 
<span id="result" style="color:red;"></span></form> 
</body> 
</html> 


在 浏览 器 中 打开 js20.html， 没 有 选择 省 份 时 的 显示 结果 如 图 12-21 所 示 。 


口 1S15 交 - 首 市 级 x 全 


| © 170014.. 六 | 


省 份 : | 请 选择 省 份 "| 


城市 : | 请 选择 城市 | 
你 选择 的 结果 是 : 


图 12-21 js10.html 的 初始 显示 结果 
选择 省 份 和 城市 后 的 一 种 显示 结果 如 图 12-22 所 示 。 


[ lejlteie 
口 Js 特效 - 首 市 丝 ' x 同 


c 0 [O00 姓 


你 选择 的 结果 是 : 北京 :崇文 


12-22 ”选择 省 份 和 城市 之 后 的 显示 结果 


YY Web 编程 基础 一 一 HTML5、CSS3、JavaScript (第 2 版 ) 


当 更 改 省 份 时 ， 对 应 的 城市 会 自动 填充 ， 选 择 城市 时 ， 显 示 结 果 会 做 相应 的 改变 。 
动 的 DIV 

浮动 的 DIV 指 的 是 DIV 始终 位 于 浏览 器 窗口 的 某 一 位 置 上 ， 如 果 浏 览 器 窗口 的 大 小 
更 改 ，DIV 的 位 置 也 会 随 之 浮动 。 例 如 ，js21.html 中 的 DIV 始终 位 于 当前 浏览 器 窗口 的 右 
上 角 。 

js21.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>JS 特效 -浮动 窗口 </title> 
<style type="text/css"> 

#float div { 
width: 110px7 
background: url (image/07.jpg) repeat-y; 
text-align: center; 
position: absolute; 
font-size: 12px; 
top: Opx; 

Eight LOpx? 
border: lpx solid #FF9600; 

} 

#float div img { 
vertical-align: middle; 
border: none; 
vertical-align: middle; 

} 

#float div a { 
text-decoration: none; 
Color: #0000FF; 
font-size: 12px; 

} 

</style> 
<script language="javascript"> 
function floatDiv(obj, n) { 

Var StartY = 10; 

variendy = nn 

// 获 取 DIV 

var div = document .getElementById (obj); 

// 浮 动 层 定位 函数 

function getD() { 

var dtop = Number (document .body.scrollTop || document. 


documentElement .scrollTop); 
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startY += (endY + dtop 一 startY) * 0.17 


div.style.top = startY + "px"; 
} 
setInterval ("getD()", 30); 
} 
floatDiv('float div', 50); 
</script> 
</head> 
<body> 
<div id="float div"> 
<div> 
<img src="image/06.jpg" width="15" /> 


<a target=" blank" href="#"> 超 级 链接 1</a><br /> 


<img src="image/06.jpg" width="15" /> 


<a target=" blank"” href="#"> 超 级 链接 2</a><br /> 


<img src="image/06.jpg" width="15" /> 


<a target=" blank"” href="#"> 超 级 链接 3</a><br /> 


<img src="image/06.jpg" width="15" /> 


<a target=" blank" href= 
</div> 
</div> 
</body> 
</html> 


js21.html 的 显示 结果 如 图 12-23 所 示 。 


12-23 js21.html 的 显示 结果 


3. 滚动 公告 


#"> 超 级 链接 4</a> 


在 DIV 中 设置 公告 , 利用 window 对 象 的 setTimeout() 方 法 间隔 一 定 的 时 间 调 用 指定 的 


函数 移动 DIV 中 的 元 素 。 滚 动 公告 的 使 用 示例 可 参照 js22.html。 
js22 html: 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title>JS 特效 -滚动 公告 </title> 
<style type="text/css"> 
#div msg { 
line-height: 20px; 
height: 60px; 
width: 200px; 
border: lpx solid #FF9600; 
overflow: hidden; 
color: #008000; 
font-size: 14px; 
background-color: #FAFOE6; 
} 
dTink’ + 
font-size: 14px; 
color: green; 
text-decoration: none; 
} 
a:hover { 
Color: red; 
text-decoration: none; 
} 
a:active { 
color: blue; 
text-decoration: none; 
} 
a:visited { 
color: gray; 
text-decoration: none; 
} 
</style> 
<script type="text/javascript"> 
Var Scroll = new function() { 


this.delay = 2000; // 延 迟 的 时 间 
this.auto = 30; // 延 迟 的 时 间 
this.height = 20; // 行 的 高 度 
this.step = 4; // 步 长 


this.curHeight = 0; 
this.stimer = null; 
this.timer = null; 
this.start = function() { 
// 开 始 翻 页 ， 调 用 move 方法 


Var. SelE = thls 
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setTimeout (function() { 
self.move(); 
}, this.delay); 


this.move = function() { 
var self = this; 
if(this.curHeight == this.height) 
// 如 果 显 示 完 一 行 
{ 
this.timer = setTimeout (function() { 
// 使 用 定时 器 ， 定 时 下 一 行 的 翻 页 时 间 
Self.move (); 
}, this.delay); 
this.curHeight = 0; 
if(this.element.scrollTop >= this.element. 
scrollHeight — 
this.height) { 
// 滚 动 信 息 已 经 完毕 
this.stop(); 
setTimeout (function() { 
self.element .scrollTop = 0; 
self.start (); 
}, this.delay); 
} 
return true; 
} 
this.element .scrollTop += this.step; 
this.curHeight += this.step; 
this.timer = setTimeout (function() { 
// 设 置 自动 翻 页 定时 器 
self.move(); 
}, this.auto); 
} 
this.stop = function() { 
// 清 除 定时 期 ， 停 止 滚动 翻 页 


clearTimeout (this.timer) 7 


下 
7 scripE> 
</head> 
<body> 
<div id="div msg"> 


<a href="#"> 研 究 生 生活 补助 涨 至 每 月 500</a><br /> 


x 
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<a href="#"> 英 国 中 小 学 生 入 学 更 难 </a><br /> 
<a href="#"> 父 母 不 可 宽恕 的 十 大 恶习 </a><br /> 
"#"> 大 学 生 要 合理 消费 </a><br /> 
"#"> 家 长 如 何 选 择 少儿 英语 机 构 </a><br /> 
<a "#"> 美 国 大 选 演讲 集 </a><br /> 
<a href="#"> 纪 录 片 《百年 巨匠 》</a><br /> 
</div><br /> 
<script type="text/javascript"> 


<a 


<a 


Scroll.element = document.getElementById('div msg'); 
Scroll.start (); 
</script> 
<input type="button" value="Start" onclick="Scroll.start()" /> 
<input type="button" value="Stop" onclick="Scroll.stop()" /> 
</body> 
</html> 


js22.html 的 显示 结果 如 图 12-24 所 示 ， 可 以 滚动 显示 公告 。 


Ee x 
/ 口 Js 条 效 -滚动 人 ”x 区 


C 合 19 127.0018. 女 


压 长 如 何 选 择 少儿 英语 机 构 
其 国 大 选 演讲 集 
纪录 片 《百年 巨匠 》 | 


图 12-24 js12.html 的 显示 结果 


注意 : 本 例 中 的 公告 只 能 滚动 一 次 ， 读 者 可 以 自行 修改 成 循环 滚动 的 效果 。 

4. 动态 操作 节点 

DOM 是 目前 通用 的 操作 HTML 和 XML 的 模型 ， 使 用 JavaScript 来 操作 DOM 在 网 页 
的 设计 和 开发 中 使 用 非常 广泛 。DOM 操作 节点 主要 分 为 获取 节点 、 增 加 节点 、 修 改 节点 、 
删除 节点 、 获 取 节 点 的 属性 以 及 修改 节点 的 属性 等 。 在 JavaScript 中 获取 节点 的 方法 如 表 
12-17 所 示 。 


表 12-17 ”获取 节点 的 方法 


方法 说 明 

parentNode() 获取 当前 节点 的 父 节点 
childNodesO 获取 当前 节点 的 子 节点 集合 
firstChild0 获取 当前 节点 的 第 一 个 子 节点 
lastChild0 获取 当前 节点 的 最 后 一 个 子 节点 
nextSiblingO 获取 当前 节点 的 下 一 个 同 级 节点 


previousSiblingO) 获取 当前 节点 的 前 一 个 同 级 节点 
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在 JavaScript 中 增加 、 删 除 、 修 改 节点 等 动态 操作 的 方法 如 表 12-18 所 示 。 
表 12-18 动态 操作 节点 的 方法 


方法 说 明 

createElement() 创建 一 个 节点 

createTextNode() 创建 一 个 文本 节点 

appendChild() 在 当前 节点 中 追加 一 个 子 节点 

TeplaceChild0) 按照 索引 将 当前 节点 的 指定 子 节点 替换 成 新 的 节点 
replaceChild() 将 当前 节点 替换 成 新 的 节点 

removeChild() 移 除 当 前 节点 的 指定 子 节点 

removeNode() 移 除 当 前 节点 


节点 的 属性 和 内 容 的 相关 操作 方法 如 表 12-19 所 示 。 
表 12-19 节点 的 属性 及 内 容 的 方法 


方法 说 明 

setAttribute() 设置 当前 元 素 的 特定 属性 的 值 

getAttribute() 获取 当前 元 素 的 特定 属性 的 值 

removeAttribute() 移 除 当前 元 素 的 特定 属性 

innerHTML 设置 或 获取 当前 节点 的 内 容 ( 不 包含 节点 自身 的 html 标记 ) 
outerHTML 设置 或 获取 当前 节点 的 全 部 内 容 (包含 节点 自身 的 html 标记 》 
innerText 设置 或 获取 当前 节点 的 内 容 (不 包含 其 中 的 html 标记 ) 
outerText 设置 或 获取 当前 节点 的 全 部 内 容 ( 包含 其 中 的 html 标记 ) 


利用 以 上 方法 可 以 对 document 中 的 各 种 元 素 节点 进行 动态 操作 。 此 外 , 对 于 表格 来 说 
还 可 以 使 用 insertRow(0、insertCell0)、deleteRow0 以 及 deleteCell() 等 方法 进行 操作 。 其 使 
用 示例 可 参照 js23.html。 

js23.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 动 态 操作 表格 </title> 
<script type="text/javascript"> 
var flag = false, 
number = 1; 
function addRow() { 
flag = !flag; // 添 加 一 行 
var newTr = tablel.insertRow(tablel.rows.length); // 添 加 两 列 
Var newTd0 = newTr.insertCel1l() 7 
Var newTdl = newTr.insertCell(); // 设 置 列 内 容 和 属性 
if(flag) { 
newTr.style.background = "#EOFFEFEF"7 
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else { 
newTr.style.background = "#90EE90"; 
} 
Dumber++7 
newTd0.innerText = "第 ”+ number + " 行 "; 
} 
function delRow() { 
if(number > 1) { 
flag = !flag; 
tablel .deleteRow (tablel .rows.length - 1); 
number——; 


1 
</script> 
</head> 
<body> 
<table width="200" cellspacing="1" id="tablel" style="font-size: 
14px;border:lpx solid #cad9ea;"> 
<tr bgcolor="#90EE90"> 
<td> 第 1 行 </td> 
<td></td> 
</tr> 
</table> 
<input type="button" value=" 插 入 行 " onclick="addRow()" />&gnbsp; gnbsp; 
<input type="button" value=" 删 除 行 " onClick="delRow()" /> 
</body> 
</html> 


在 浏览 器 里 打开 js23.html， 其 显示 结果 如 图 12-25 所 示 。 
连续 单 击 “插入 行 ” 按 钮 3 次 ， 其 显示 结果 如 图 12-26 所 示 。 


加 je| 
-他 动态 操作 表格 x 岂 
GC 0 [O170018 | : 


图 12-25 js23.html 的 初始 显示 结果 图 12-26 添加 3 行 以 后 的 显示 结果 


连续 单 击 “ 删 除 行 ”按钮 两 次 ， 其 显示 结果 如 图 12-27 所 示 。 
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CQ [Oo «| 
第 行 
第 2 行 


颖 入 行 


图 12-27 ”删除 两 行 以 后 的 显示 结果 


小 结 


。 DOM 编程 是 使 用 JavaScript 开发 网 页 最 常 使 用 的 对 象 模型 。 

。 DOM 编程 涉及 的 对 象 包括 window 对 象 、document 对 象 、 表 单 对 象 、history 对 象 、 
location 对 象 。 

window 对 象 是 最 顶层 的 BOM 对 象 , 其 他 的 DOM 对象 都 是 window 对 象 的 子 对 象 。 
document 对 象 对 应 着 网 页 文档 , 每 当 使 用 浏览 器 打开 一 个 网 页 ，document 对 象 会 自 
动 生 成 。 

表单 对 象 指 网 页 中 出 现 的 form, 一 个 网 页 中 允许 出 现 一 个 或 多 个 form, 可 以 通过 名 
称 或 者 索引 的 方式 访问 表单 中 的 元 素 的 属性 或 方法 。 

DOM 编程 采用 的 事件 处 理 模 型 ， 在 网 页 上 进行 交互 操作 可 以 引发 网 页 元 素 的 相应 
事件 ， 通 过 事件 可 以 触发 对 应 的 处 理 函数 。 

在 DOM 中 ， 网 页 的 元 素 被 组 织 成 树 状 的 节点 结构 ， 可 以 利用 相关 的 属性 和 方法 动 
态 操作 页 面 中 的 节点 。 


习题 


1. 要 获取 name 为 login 的 表单 中 的 name 为 usemame 的 文本 框 的 值 ， 应 该 使 用 (  )。 
A. login.username.value 
B. document.usermame.value 
C. document.login.username 
D. document.login.username.value 
2. history 对 象 的 ) 方法 用 于 加 载 历史 列表 中 的 下 一 个 URL 页 面 。 
A. next() 
B. back() 
C. forward() 
D. go() 
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3. 下 列 ( ) 表单 元 素 不 能 与 onChange 事件 处 理 程序 相关 联 。 

文本 框 

复 选 框 

列表 框 

按钮 

HTML 页 面 上 ， 当 按 下 键盘 上 的 任意 一 个 键 时 会 触发 JavaScript 的 ( 和 


忌 只 中 只 


事件 。 


onFocus 
onBlur 
. OnSubmit 


pg 


. onKeyDown 
5， 如果 要 在 网 页 显示 后 ， 动 态 地 改变 网 页 的 标题 ， 可 以 使 用 ( ) 方法 。 
A. 不 能 实现 
B. document.write("new title"); 
C. document.title("new title"); 
D. document.changeTitle("new title"); 
6. HTML 文档 的 树 状 结构 中 ，( ” ”) 标签 是 文档 的 根 节点 。 
A. <html> 
B. <head> 
C. <body> 
D. <title> 
7. 表单 的 标记 是 <form>，<form> 标 签 的 method 属性 表示 发 送 表单 的 方法 ， 可 取 值 为 
get 或 者 post， 以 下 描述 中 正确 的 是 Ne 
人 A， post 方法 传递 的 数据 对 客户 端 是 不 可 见 的 
B. get 请 求 信息 以 查询 字符 串 的 形式 发 送 ， 查 询 字 符 串 的 长 度 没 有 大 小 限制 
C. post 方法 对 发 送 数据 的 数量 限制 在 255 个 字符 之 内 
D. get 方法 传递 的 数据 对 客户 端 是 不 可 见 的 
8. 在 HTML 中 的 表单 中 ， 有 一 个 下 拉 列表 的 代码 为 ; 
<select id="country"> 
<option value="1"> 中 国 </option> 
<option value="2"> 美 国 </option> 
</select> 
使 用 JavaScript 怎样 获取 当前 选中 国家 的 value 值 和 名 称 〈 例 如 1 和 中 国 ) ? 
9. 完成 foo0 函 数 ， 要 求 提交 表单 时 能 够 弹出 对 话 框 提 示 当 前 选中 的 是 第 几 个 单 选 按钮 。 
10. 在 HTML 文档 中 完成 函数 test0)， 实 现 如 下 功能 : 
(1) 当 多 行文 本 框 内 的 字符 数 超过 20 个 时 ， 截 取 至 20 个 。 
(2) 在 id 为 content 的 单元 格 中 显示 文本 框 的 字符 个 数 。 


AJAX (Asynchronous JavaScript And XML， 异 步 JavaScript 和 XML) 是 一 种 创建 交互 
式 网 页 的 开发 技术 。AJAX 并 不 是 一 种 新 技术 ， 而 是 JavaScript、XML、CSS 等 各 种 技术 的 
融合 ,与 AJAX 相关 的 新 术语 为 XMLHttpRequst 对 象 (简称 为 XMLHTTP ).XMLHttpRequst 
出 现 之 初 , 只 有 下 浏览 器 可 以 支持 ,但 是 从 Mozilla 1.0 和 Safari 1.2 开始 ,对 XMLHttpRequst 
对 象 的 支持 开始 普及 ， 如 今 对 XMLHttpRequst 对 象 的 支持 已 成 为 事实 上 的 标准 。 

如 今 ，AJAX 可 以 在 大 多 数 的 浏览 器 中 使 用 。AJAX 是 在 客户 端 使 用 的 技术 ， 可 以 与 
J2EE、.NET、PHP 以 及 CGI 脚本 进行 交互 。 通 过 AJAX，JavaScript 的 XMLHttpRequst 对 
象 可 以 直接 与 Web 服务 器 进行 通信 ， 从 而 实现 不 刷新 页 面 就 可 以 与 Web 服务 器 交换 数据 
的 功能 。 

相 比 较 于 其 他 的 网 页 开发 技术 ，AJAX 具有 明显 的 优势 ， 主 要 体现 在 以 下 几 点 : 

对 于 传统 的 网 页 ， 如 果 需 要 更 新 内 容 ， 必 须 重 新 装载 整个 页 面 。 而 AJAX 在 浏览 器 
与 Web 服务 器 之 间 使 用 异步 数据 传输 方式 , 网 页 从 服务 器 请 求 的 是 少量 的 信息 , 而 
不 是 整个 页 面 ， 用 户 感觉 不 到 页 面 的 提交 ， 当 然 也 不 用 等 待 响应 的 返回 。 

AJAX 可 以 使 应 用 程序 的 容量 更 小 、 速 度 更 快 、 界 面 更 友好 。 利 用 AJAX 可 以 使 
Web 应 用 程序 的 界面 变 得 更 友好 ， 向 桌面 应 用 程序 的 友好 性 发 展 。 

AJAX 是 一 种 独立 于 Web 服务 器 的 浏览 器 端的 技术 ，AJAX 应 用 程序 独立 于 浏览 器 
和 平台 。 

但 是 ，AJAX 也 存在 一 些 缺 陷 ， 主 要 表现 在 以 下 几 个 方面 : 

。 AJAX 会 使 浏览 器 的 后 退 按钮 失效 。 

。 AJAX 暴露 了 客户 端 与 服务 器 端 交 互 的 细节 问题 ， 在 一 定 程度 上 存在 安全 隐患 。 

。 AJAX 对 搜索 引擎 的 支持 不 好 。 

。 AJAX 破坏 了 程序 的 异常 机 制 。 

。 开发 和 调试 工具 欠缺 ， 不 易 调 试 。 

虽然 AJAX 本 身 存在 一 些 缺 点 ， 但 其 应 用 前 景 仍然 很 乐观 。 利 用 AJAX 可 以 提高 系统 
性 能 、 优 化 用 户 界面 。AJAX 现在 拥有 可 以 直接 使 用 的 框架 AjaxPro， 可 以 直接 在 前 台 页 面 
的 JavaScript 中 调用 后 台 页 面 。 目 前 ， 各 大 门户 网 站 上 AJAX 的 使 用 非常 普遍 ， 例 如 新 浪 
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微 博 、Google 地 图 等 都 使 用 了 AJAX 技术 。Google Suggest 通过 使 用 AJAX 创建 出 了 动态 
性 极 强 的 Web 界面 一 一 当 在 搜索 框 里 输入 关键 字 时 ， 服 务 器 会 返回 一 个 建议 搜索 的 列表 。 


(> XML HttpRequst 对 象 


AJAX 不 是 一 种 技术 ， 而 是 几 种 技术 的 融合 。 使 用 XHTML 和 CSS 来 表示 元 素 ， 使 用 
DOM 模型 来 进行 动态 显示 和 交互 ， 使 用 XMLHttpRequst 对 象 和 服务 器 进行 异步 通信 ， 使 
用 XML 和 XSLT 进行 数据 交换 和 处 理 ， 使 用 JavaScript 来 进行 绑 定 和 调用 , 将 以 上 技术 融 


合 在 一 起 就 构成 了 AJAX。 其 技术 组 成 结构 如 图 13-1 所 示 。 


JavaScript 
脚本 


XMLHttpRequest 引擎 


图 13-1 AJAX 的 技术 组 成 结构 图 
AJAX 技术 通过 XMLHttpRequest 对 象 向 服务 器 发 送 异步 请 求 ， 从 服务 器 获取 数据 ， 
使 用 JavaScript 和 DOM 来 更 新 页 面 。XMLHttpRequest 是 AJAX 的 核心 对 象 ， 它 支持 异步 
请 求 ， 通 过 XMLHttpRequest 对 象 ，JavaScript 可 以 在 不 阻塞 用 户 的 情况 下 ， 向 服务 器 提出 
请 求 和 处 理 响应 ， 从 而 达到 局 部 刷新 的 效果 。 传 统 Web 模式 的 交互 过 程 如 图 13-2 所 示 ， 
使 用 AJAX 的 Web 模式 的 请 求 至 响应 的 过 程 如 图 13-3 所 示 。 


HTTP 请 求 
客户 端 [| 服务 器 端 
HTTP+CSS 数据 


13-2 ”传统 Web 模式 的 交互 过 程 


JavaScript 调用 HTTP 请 求 
| ”过 P 滑 ”上 Aax 引 区 上 慰 一 一 ”| 服务 器 端 
HTTP+CSS 数据 XML 数据 


13-3 ”使 用 AJAX 的 Web 模式 的 交互 过 程 
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13.2.1 XMLHttpRequest 对 象 的 创建 


较 低 版 本 的 正 浏览 器 (IE5 和 焉 6) 使 用 ActiveXObject 来 创建 XMLHttpRequest 对 象 。 
例如 : 


Var xmlHttp=new ActiveXObject ("Microsoft.XMLHTTP"); 


其 他 的 现代 的 浏览 器 ， 例 如 IE7+、Firefox 、Chrome 以 及 Opera 等 都 已 经 内 建 了 
XMLHttpRequest 对 象 。 在 这 些 浏 览 器 中 使 用 XMLHttpRequest 对 象 的 构造 方法 创建 。 例 如 : 


Var XmlHttp = new XMLHttpRequest () 7 
考虑 到 浏览 器 的 兼容 问题 ， 应 使 用 以 下 代码 创建 XMLHttpRequest 对 象 ， 例 如 : 


Var xmlHttp; 
if (window.XMLHttpRequest){ 
// 已 内 建 XMLHttpRequest 对 象 的 浏览 器 
xmlHttp = new XMLHttpRequest (); 
} 
elsel 
//IE5 和 IE6 
xmlHttp = new ActivexObject ("Microsoft .XMLHTTP"); 
} 


13.2.2 XMLHttpRequest 对象 的 方法 


XMLHttpRequest 对 象 的 方法 如 表 13-1 所 示 。 
表 13-1 XMLHttpRequest 对 象 的 方法 


方法 说 明 

abort0) 停止 当前 请 求 
getAllResponseHeaders() 返回 所 有 的 HTTP 响应 头 信息 
getResponseHeader(header) 返回 指定 的 HTTP 响应 头 信息 
open(method, url) 建立 对 服务 器 的 请 求 
send(content) 向 服务 器 发 送 请 求 
setRequestHeader(header value) 设置 指定 的 HITP 请 求 头 信息 


1. open() 方 法 
open() 方 法 用 于 建立 对 服务 器 的 请 求 ， 其 语法 格式 如 下 : 
open (method, url, async, username, password); 
其 中 ， 
。 method 是 请 求 的 类 型 ， 必 选 参数 ， 字 符 串 类 型 ， 可 以 是 GET、POST 或 者 PUT。 相 
对 于 POST 方法 ，GET 方法 比较 简单 。 但 是 当 无 法 使 用 缓存 文件 ， 或 者 需要 向 服务 
器 发 送 大 量 数据 ,或 者 包含 未 知 字符 的 用 户 输入 时 ，POST 方法 比 GET 方法 更 稳定 


9 
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可 靠 。 


对 路 径 。 


url 指 的 是 请 求 资源 的 URL， 必 选 参数 ， 字 符 串 类 型 ， 可 以 是 相对 路 径 也 可 以 是 绝 


async 指 是 否 采 用 异步 请 求 ， 可 选 参数 ， 布 尔 类 型 ， 默 认 值 为 tue。 如 果 该 参数 为 


false， 则 采用 同步 方式 请 求 ， 客 户 端 需要 等 竺 处理， 直到 服务 器 返回 为 止 。 


2. send() 方 法 


username 和 password 指 的 是 请 求 服务 器 资源 时 需要 输入 的 用 户 名 和 密码 , 均 为 字符 
串 类 型 的 可 选 参数 。 


send() 方 法 用 于 向 服务 器 发 出 请 求 ， 其 语法 格式 如 下 : 


send (Content) 7 


其 中 ，content 为 发 送 的 内 容 ， 可 以 为 null。 如 果 请 求 是 异步 的 ， 该 方法 就 会 立即 返回 ， 如 


果 请 求 是 同步 的 ， 则 处 理会 等 待 直到 接收 到 服务 器 的 响应 为 止 。 


13.2.3 XMLHttpRequest 对 象 的 属性 


XMLHttpRequest 对 象 的 属性 及 说 明 如 表 13-2 所 示 。 


属性 
onreadystatechange 
TeadyState 


responseText 
responseXML 
statusText 
status 


表 13-2 XMLHttpRequest 对 象 的 属性 
说 明 
存储 函数 (函数 名 )， 每 当 readyState 属性 改变 时 ， 都 会 调用 此 函数 
存 有 XMLHttpRequest 的 状态 ， 值 为 0 一 4。 
0 表示 请 求 未 初始 化 ; 
1 表示 服务 器 连接 已 建立 ; 
2 表示 请 求 已 接收 ; 
3 表示 请 求 处 理 中 ; 
4 表示 请 求 已 完成 ， 且 响应 已 就 绪 
服务 器 的 响应 ， 表 示 为 字符 串 
服务 器 的 响应 ， 表 示 为 XML， 可 以 解析 成 一 个 DOM 对 象 
返回 HITP 状态 码 对 应 的 文本 
服务 器 的 HTTP 响应 状态 码 ， 如 : 
200 表示 成 功 ; 
400 表示 错误 的 请 求 ; 
404 表示 文件 未 找到 ; 
500 表示 服务 器 内 部 出 现 错误 


13.2.4 XMLHttpRequest 对象 的 工作 过 程 


XMLHttpRequest 对 象 的 工作 过 程 可 以 分 为 以 下 几 个 步骤 。 
1. 创建 XMLHttpRequest 对 象 
当 用 户 在 客户 端的 浏览 器 提交 请 求 时 ， 需 要 先 创建 一 个 XMLHttpRequest 对 象 。 
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2. 初始 化 请 求 


调用 XMLHttpRequest 对 象 的 open0 方 法 进行 请 求 的 初始 化 , 并 根据 open() 方 法 的 参数 
设置 对 象 的 状态 。 

3. 发 送 请 求 

调用 XMLHttpRequest 对 象 的 send0 方 法 向 服务 器 发 送 请 求 。 

4. 解析 数据 

通过 XMLHttpRequest 对 象 的 属性 可 以 解析 原始 数据 ， 可 以 将 服务 器 端 返回 的 数据 转 
换 成 responseBody、responseText、responseXML 等 可 以 被 客户 端 直接 使 用 的 属性 。 

5. 完成 

解析 完成 之 后 ， 在 客户 端 可 以 调用 XMLHttpRequest 对 象 的 responseText 属性 返回 字 
符 串 类 型 的 数据 ， 使 用 XMLHttpRequest 对 象 的 responseXML 返回 XML Document 对 象 类 
型 的 数据 。 

在 onreadystatechange 事件 中 ， 表 示 服 务 器 的 响应 已 处 理 完成 。 当 XMLHttpRequest 对 
象 的 readyState 属性 为 4， 并 且 status 属性 为 200 时 才 表 示 响 应 已 就 绪 ， 可 进行 相应 的 业务 
风 辑 处 理 。 例 如 : 

xmlHttp.onreadystatechange = function(){ 

if (xmlHttp.readystate == 4 && xmlHttp.status == 200){ 


// 此 处 为 业务 逻辑 处 理 部 分 
// 可 以 处 理 xmlHttp 对 象 的 responseText 或 者 responseXML 属性 


} 


例如 ，jsl.html， 以 GET 方式 向 服务 器 端的 RequestDataServlet 提交 请 求 ， 附 加 参数 ， 
不 允许 使 用 缓存 中 的 数据 。 
jsl html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 以 GET 方式 向 服务 器 提交 请 求 </title> 
<script type="text/javascript"> 
var xmlHttp; 
function createxMLHttpRequest() { 
// 创 建 XMLHttpRequest 对 象 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest (); 
} else { 
xmlHttp = new ActivexObject ("Microsoft .XMLHTTP"); 
} 
} 
// 处 理 从 服务 器 返回 的 响应 


Yey 
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function processor() { 


// 响 应 完成 

if (xmlHttp.readyState == 4) { 
// 响 应 成 功 
if(xmlHttp.status == 200) { 


Var txt = xmlHttp.responseText; 
document .getElementById("div msg") .innerHTML = txt; 


} 
function requestData() { 
createxMLHttpRequest (); 
// 将 状态 触发 器 绑 定 到 函数 
xmlHttp.onreadystatechange = processor; 
// 通 过 请 求 参 数 中 使 用 Math .random () 获取 随机 数 来 避免 使 用 缓存 中 的 数据 
XmlHttp .open ("GET", 
"RequestDataServlet?name=wangmingming&address=beijing&t="+ 
Math.random(), true); 
xmlHttp.send (null); 
} 
</script> 
</head> 
<body> 
<h2> 以 GET 方式 向 Servlet 提交 请 求 </h2> 
<input type="button" value=" 请 求 数 据 " onclick="requestData()" /> 
<div id="div msg"></div> 
</body> 
</html> 


RequestDataServlet: 


package cn.edu.gqfnu.chl3.servlet; 


import java.io.IOException; 

import java.io.PrintWriter; 

import javax.servlet.ServletException; 

import javax.servlet.http.HttpsServlet; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 


public class RequestDataServlet extends HttpServlet { 
public RequestDataServlet() { 


:! 
protected void doGet (HttpServletRequest request, HttpServletResponse 
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response) throws ServletException, IOException { 
response.setContentType ("text/html"); 
PrintWriter out=response.getWriter(); 
String name=request .getParameter ("name"); 
String address=request .getParameter ("address"); 
String str="Welcome!"+name+",your address is "+address+"!"; 
// 将 处 理 结果 返回 给 客户 端 
out.println (str); 
out.flush(); 
out.close(); 


protected void doPost(HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
doGet (request, response); 


web.xml 中 关于 RequestDataServlet 的 配置 : 


<servlet> 
<servlet-name>RequestDataServlet</servlet-name> 
<servlet-class>cn.edu.qfnu.chl3.servlet.RequestDataSservlet</servlet-cl 
ass> 
</servlet> 
<servlet-mapping> 
<servlet-name>RequestDataServlet</servlet-name> 
<url-pattern>/RequestDataSservlet</url-pattern> 
</servlet-mapping> 


上 例 中 因为 用 到 了 动态 网 页 开发 技术 Servlet， 所 以 需要 进行 服务 器 的 部 署 ， 相 关内 容 
请 参考 Java Web 编程 知识 。 在 浏览 器 中 输入 对 jsl.html 的 请 求 ， 单 击 “ 请 求 数据 ”按钮 ， 
其 显示 结果 如 图 13-4 所 示 。 


”可 a LE 3 
本 ~ Ei 


€ GC 合 |@ localhost9090/ch13... 人 女 


以 GET 方 式 向 Servlet 提 交 请 求 


请 求 数 据 
Welcomelwangmingming.your address is beijing! 


图 13-4 ”提交 请 求 后 的 显示 结果 
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SA 


例如 ,js2.html, 使 用 AJAX 实现 动态 时 钟 .在 前 面 的 章节 中 ,使 用 刷新 页 面 和 setInterval() 
方法 实现 了 客户 端的 动态 时 钟 。 本 例 中 , js2.html 通过 请 求 GetTimeServlet 获取 服务 器 端的 
二 间 。 
js2.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 AJAX 实现 动态 时 钟 </title> 
<script type="text/javascript"> 
Var xmlHttp; 


function createXMLHttpRequest() { 
// 创 建 XMLHttpRequest 对 象 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest (); 
} else { 
xmlHttp = new ActiveXObject ("Microsoft .XMLHTTP"); 


} 
// 处 理 从 服务 器 返回 的 响应 
function processor() { 
// 响 应 完成 
if (xmlHttp.readyState == 4) { 
// 响 应 成 功 
if(xmlHttp.status == 200) { 
Var txt = xmlHttp.responseText; 
document .getElementById("div msg") .innerHTML = txt; 


} 
function requestData() { 
createxMLHttpRequest (); 
// 将 状态 触发 器 绑 定 到 函数 
xmlHttp.onreadystatechange = processor; 
// 通 过 请 求 参数 中 使 用 Math .random () 获取 随机 数 来 避免 使 用 缓存 中 的 数据 
xmlHttp.open ("GET", "GetTimeServlet?t=" + Math.random(), true); 
xmlHttp.send (null); 
} 
// 每 间隔 1 秒 调用 一 次 requestData() 函数 
window.setInterval ("requestData()", 1000); 
</script> 
<style type="text/css"> 
div { 
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} 


color: #008000; 

font-size: 30px; 
font-family: impact; 
background-color: #F0FFFO; 
border: lpx solid #008000; 
width: 280px; 

height: 50px; 

text-align: center; 


</style> 


</head> 
<body> 


<h2> 使 用 AJAX 实现 动态 时 钟 </h2> 
<div id="div msg"></div> 


</body> 
</html> 


GetTimeServlet: 


package cn.edu.gqfnu.chl3.servlet; 


import java.io.IOException; 


import java.io.PrintWwriter; 


import java.text.SimpleDateFormat; 


import java.util.Date; 


import javax. 
import javax. 
import javax. 
import javax. 


public class 


servlet .ServletException; 
servlet.http.HttpServlet; 
servlet.http.HttpServletRequest; 
servlet.http.HttpServletResponse; 


GetTimeServlet extends HttpServlet { 


public GetTimeServlet() { 


super (); 


} 


protected void doGet (HttpServletRequest request, 
response) throws ServletException, IOException { 


response.setContentType ("text/html"); 


PrintWriter out=response.getWriter(); 
// 获 取 服 务 器 的 时 间 

Date date=new Date(); 

// 格 式 化 时 间 


SimpleDateFormat sdf=new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss"); 


HttpServletResponse 


301 
$A 


302 
EN 
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String strDate=sdf.format (date); 
// 将 处 理 结果 返回 给 客户 端 

out .println (strDate) ; 
out.flush(); 


out.close()}); 


protected void doPost(HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
doGet (request, response); 


web.xml 中 关于 GetTimeServlet 的 配置 : 


<servlet> 
<servlet-name>GetTimeServlet</servlet-name> 
<servlet-class>cn.edu.qfnu.chl3.servlet.GetTimeServlet</servlet-class> 

</servlet> 

<servlet-mapping> 
<servlet-name>GetTimeServlet</servlet-name> 
<url-pattern>/GetTimesServlet</url-pattern> 

</servlet-mapping> 


js2.html 的 显示 结果 如 图 13-5 所 示 ， 时 钟 可 以 动态 变化 。 
[lex 


/国人 EAN x 全 
€ C 合 |@ Iocalhost9090. 公 | : | 


使 用 AJAX 实 现 动态 时 钟 
2018-05-28 16:19:07 


图 13-5 js2.html 的 显示 结果 


(33 AJAX 与 JSP 


使 用 AJAX 请 求 JSP 资源 与 请 求 Servlet 资源 类 似 。 如 果 不 使 用 AJAX 请 求 JSP 资源 ， 
需要 刷新 页 面 ， 等 待 服务 器 的 返回 结果 。 如 果 使 用 AJAX 异步 请 求 JSP 资源 ， 则 不 用 刷新 
页 面 ， 也 不 用 等 待 服务 器 的 返回 结果 。 
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例如 ，js3.html， 使 用 AJAX 实现 请 求 JSP 资源 ， 在 关键 字 里 输 入 字母 ， 按 回 车 键 后 会 
给 出 推荐 的 关键 字 , 即 列 出 所 有 以 用 户 输入 的 字符 串 开 头 的 关键 字 , 类 似 于 Google 和 百度 
的 关键 字 提 示 。 

js3.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 AJAX 实现 关键 字 提示 </title> 
<script type="text/javascript"> 
var xmlHttp; 
function createxMLHttpRequest() { 
// 创 建 XMLHttpRequest 对 象 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest (); 
} else { 
xmlHttp = new ActiveXxObject ("Microsoft .XMLHTTP"); 


} 
// 处 理 从 服务 器 返回 的 响应 
function processor() { 
// 响 应 完成 
if (xmlHttp.readyState == 4) { 
// 响 应 成 功 
if(xmlHttp.status == 200) { 
Var txt = xmlHttp.responseText; 
document .getElementById("div msg") .innerHTML = txt; 


} 
function getKeywords (info) { 
if(info.length == 0) { 
document .getElementById("div msg") .innerHTML = ""; 
return; 
} 
createxMLHttpRequest (); 
// 将 状态 触发 器 绑 定 到 函数 
XmlHttp .onreadystatechange = processor; 
// 请 求 getKeywords .jsp 资源 ， 并 且 将 用 户 输入 的 信息 作为 参数 传递 
// 通 过 请 求 参 数 中 使 用 Math .random () 获取 随机 数 来 避免 使 用 缓存 中 的 数据 
XmlHttp .open ("GET", "getKeywords.jsp?info=" + info + "&t=" + 
Math.random(), true); 


// 发 送 请 求 


303 
SVM 


So 
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xmlHttp.send (null); 
} 
</script> 
</head> 
<body> 
<form> 
请 输入 关键 字 的 起 始 部 分 (A-2): <br /> 
<input type="text" id="key" onKeyUp="getKeywords (this.value)" /> 
<div id="div msg"></div> 
</form> 
</body> 
</html> 


getKeywords.jsp: 


<%@ page languag 


ava" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. 

WwW3 .org/TR/htm14/1oose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title> 返 回 与 给 定 信息 匹配 的 关键 字 </title> 


</head> 
<body> 
<% 
// 获 取 传 递 的 参数 
String info=request.getParameter ("info"); 
// 定 义 可 供 筛选 的 关键 字 
String[] 


allKeywords={"Smith","Johnson", "Williams", "Brown", "Miller", "Davis","Garcia", 
"Rodriguez", "Willson", "Martinez", "Anderson", "Taylor", "Thomas", "Hemandez", 
"Moore", "Martin", "Jackson", "Thompson", "White","Lopez", "Lee", "Gozalez", 
"Harris", "Clark", "Lewis", "Frank", "Walker", "Perez", "Hall", "Young", "Allen", 
"Sanchez", "Wright", "King","Scott", "Green", "Baker", "Adams", "Nelson", "Hill", 
"Ramirez", "Campbell"}; 
String result=""; 
for (int i=0;i<allKeywords.length;i++){ 
// 如 果 存在 匹配 的 关键 字 ， 则 将 关键 字 加 入 到 返回 结果 中 
if(allKeywords[i].startsWwith (info)==true){ 


result=result+allKeywords[i]+" "7 


3 
// 如 果 返 回 结果 为 空 字符 串 ， 则 给 出 相应 的 提示 


下 


if(result.equals("™")){ 
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result="No mathced keywords!"; 


} 
// 将 结果 返回 给 客户 端 
out .print (result) 
out .flush()7 

%> 

</body> 

</html> 


部 署 完 成 后 ， 请 求 js3.html， 在 页 面 中 输入 相应 信息 ， 存 在 匹配 的 关键 字 的 结果 如 图 
13-6 所 示 。 
不 存在 匹配 的 关键 字 的 结果 如 图 13-7 所 示 。 


lela 


/em x 
€ > CHO | : 
请 给 入 关键 地 的 起 折 印 个 (A) 

B 


elel| 
J 加 使 用 JAXss: x \>X 


¢ > © 0 [Doo 人 | : 


请 输入 关键 字 的 起 始 部 分 (A-Z)， 
IBC 


No mathced keywords! 


Brown Baker 


图 13-6 js3.html 的 存在 匹配 关键 字 的 显示 结果 图 13-7 js3.html 的 不 存在 匹配 关键 字 的 显示 结果 


(32 AJAX 与 XML 


XML 并 不 是 一 种 编程 语言 ， 而 是 用 于 构造 其 他 语言 的 元 语言 。 与 HIML 相似 ，XML 
是 一 种 显示 数据 的 标记 语言 。XML 是 通用 标识 语言 标准 〈Standard Generalized Markup 
Language，SGML) 的 子 集 ， 使 用 XML 语言 组 织 的 数据 可 以 显示 在 客户 端的 浏览 器 上 ， 并 
且 可 以 通过 网 络 无 障碍 地 传播 。 
1. 客户 端 和 服务 器 端 交互 XML 数据 
使 用 AJAX 不 仅 可 以 在 客户 端 和 服务 器 端 之 间 传 送 文本 信息 , 而 且 可 以 传递 XML 信息 。 
1) 由 客户 端 向 服务 器 端 发 送 XML 数据 
由 客户 端 向 服务 器 端 发 送 XML 数据 时 ， 需 要 使 用 POST 方式 。 例 如 : 
Var Xml = "<type>data</type>"; 
Var url = "GetXMLServlet?t=" + Math.random() 7 
// 绑 定 状态 触发 器 ，processor 是 自 定义 的 Javascript 函数 ， 可 参照 前 文 代码 
XmlHttp .onreadystatechange = processor; 
// 设 置 请 求 报头 Content-Type 
XmlHttp .setRequestHeader ("Content-Type", "application/x-www-form-— 


Urlencoded" ) > 


// 打 开 请 求 
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xmlHttp.open("post", url, true); 
// 发 送 请 求 
xmlHttp.send (xml) 7 


服务 器 端 接收 XML 数据 ， 可 以 使 用 以 下 方式 : 
BufferedReader reader = request.getReader (); 


2) 由 服务 器 端 向 客户 端 发 送 XML 数据 
服务 器 端 可 以 采用 以 下 方式 向 客户 端 发 送 XML 数据 : 


String xml = "<type>data</type>"; 


out .println (xml) 7 
out .flush() 7 


客户 端 可 以 通过 XMLHttpRequest 对 象 的 responseXML 属性 获取 XML 数据 ， 例 如 : 

Var xml = xmlHttp.responseXML; 

注意 : 不 论 客户 端 向 服务 器 端 传送 什么 格式 的 数据 ， 如 果 数 据 中 包含 中 文 ， 则 有 可 能 
会 引起 乱码 。 为 了 避免 乱码 问题 ， 需 要 使 用 编码 函数 。JavaScript 中 对 文字 进行 编码 的 函数 
有 escape()、encodeURI()、encodeURIComponent()， 相 应 的 解码 函数 为 unescape()、 
decodeURI()、decodeURIComponent()。 当 传递 中 文 参 数 时 需要 使 用 encodeURIComponent() 
进行 编码 ， 例 如 : 

url = encodeURIComponent ("getData.jsp?name= 王 明明 gt="+Math.random()); 

当 进 行 url 跳 转 时 ， 可 以 对 url 使 用 encodeURI(O 方 法 进行 编码 ， 例 如 : 

location.href = encodeURI ("getData.jsp?name= 王 明明 &t="+Math.random) ; 

应 该 尽量 避免 使 用 escape() 方 法 ， 因 为 escape() 方 法 不 能 正确 地 处 理 所 有 的 非 ASCII 
字符 。 

2. 使 用 AJAX 解析 XML 文件 

利用 AJAX 解析 XML 文件 ， 即 解析 XMLHttpRequest 对 象 的 responseXML 属性 。 
responseXML 属性 是 服务 器 以 XML 形式 返回 的 响应 信息 ,相当 于 一 个 XML 文档 ,在 DOM 
中 XML 文档 是 树 状 结构 ， 可 以 通过 DOM 来 访问 所 有 的 元 素 ，XML 中 的 元 素 、 文 本 以 及 
属性 都 被 认为 是 节点 ， 例 如 ，book xml。 

book. xml: 


<?xml version="1.0"” encoding="UTF-8"?> 
<bookstore> 
<book category="CHILDREN"> 
<title>Harry Potter</title> 
<author>J K. Rowling</author> 
<year>2008</year> 
<price>32.99</price> 
</book> 
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<book category="WEB"> 
<title>Learning XML and AJAX</title> 
<author>Thomas T. Ray</author> 
<year>2010</year> 
<price>28.99</price> 
</book> 
</bookstore> 


解析 上 述 XML 文档 时 ， 使 用 : 


//xmlDoc 为 解析 器 创建 的 XML 文档 

XmlDoc = xmlHttp.responseXxML; 

// 获 取 第 一 个 book 元 素 

book = xmlDoc.getElementByTagName ("book") [0]. 
// 获 取 所 有 的 book 元 素 

books = xmlDoc.getElementsByTagName ("book"); 
// 获 取 第 一 个 book 元 素 的 第 一 个 子 元 素 

title = xmlDoc.getElementByTagName ("title") [0] .childNodes [0]; 
// 获 取 元 素 title 的 节点 值 ( 文 本 本 身 ) 

value = title.nodeValue; 

// 获 取 元 素 title 的 内 部 文本 

text = title.innerHTML; 


例如 ，js4.html， 使 用 AJAX 解析 book.xml， 将 其 内 容 以 表格 的 形式 显示 在 网 页 上 。 


js4.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 AJAX 解析 XML 文档 </title> 
<script type="text/javascript"> 
var xmlHttp; 
var result, book, title, author, year, price; 
function createxMLHttpRequest() { 
// 创 建 XMLHttpRequest 对 象 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest (); 
} else { 
xmlHttp = new ActiveXxObject ("Microsoft .XMLHTTP"); 


} 

function showXML(url) { 
createxMLHttpRequest (); 
// 将 状态 触发 器 绑 定 到 函数 


xmlHttp .onreadystatechange = function() { 
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// 响 应 完成 
if(zxmlHttp.readystate == 4) { 
// 响 应 成 功 
if(xmlHttp.status == 200) { 


// 解 析 xmlHttp 对 象 的 responseXML 属性 
book = xmlHttp.responseXML.documentElement. 
getElementsByTagName ("book"); 
// 表 头 
result = "<table border='1'><tr><th>Title</th> 
<th>Author</th><th>Year</th><th>Price</th></tr>"; 
for(var i = 0; i < book.length; i++) { 
result ="result FF <tr> 
title = book[i]. getElementsByTagName 
("ETELOMYE A 
try { 
result = result + "<td>" + title[0]. 
firstchild.nodeValue + "</td>"; 
} catch(ex) { 
result = result + "<td>gnbsp;</td>" 


} 
author = book[i] .getElementsByTagName 
tauthor™)s 
try { 
result = result + "<td>" + author[0]. 
firstchild.nodeValue + "</td>"; 
} catch(ex) { 
result = result + "<td>g&nbsp;</td>" 


. 
year = book[i] .getElementsByTagName ("year"); 


try { 
result = result + "<td>" + year[0]. 
firstchild.nodeValue + "</td>"; 

} catch(ex) { 
result = result + "<td>gnbsp;</td>" 


price = book[i]. getElementsByTagName 
("price™); { 
try { 
result = result + "<td>" + price[0]. 
firstChild.nodeValue + "</td>"; 
} catch (ex) { 
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result = result + "<td>gnbsp;</td>" 


1 
result = result + "</tr>"; 


} 
result = result + "</table>"; 


document .getElementById ("div msg") .innerHTML 


result; 
} 
. 
} 
// 打 开 请 求 
xmlHttp.open ("GET", url, true); 
// 发 送 请 求 
XmlHttp.send() 7 
1 
</script> 
</head> 
<body> 


<form><input type="button" value=" 解 析 XML 文档 " onClick="showXML 


ea 
<div id="div msg"></div> 


</form> 
</body> 
</html> 


请 求 js4.html， 单 击 “ 解 析 XML 文档 ”按钮 ， 显 示 结 果 如 图 13-8 所 示 。 


/ 因 全 AIAXRFxMLX 档 x 全 


| 所 GC 合 |@ Iocalhost9090/ch13/js4.h.， 人 次 


解析 XML 文档 


Title Author 


Harry Potter JK. Rowling 
Learning XML and AJAX||Thomas T Ray| 


13-8 js4.html 的 显示 结果 


(33 AJAX 与 数据 库 


利用 AJAX+Servlet 还 可 以 读 取 数 据 库 , 可 以 实现 无 刷新 地 访问 数据 库 及 查询 数据 库 等 ， 
例如 js5.html.jss.html 通过 AJAX 请 求 GetDatabaseServlet, GetDatabaseServlet 中 使 用 JDBC 
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访问 MySQL 数据 库 test， 并 且 将 结果 返回 给 客户 端 ，js5.html 中 可 以 通过 下 拉 列 表 中 的 客 
户 名 访问 客户 详细 的 信息 .数据库 test 中 有 表 customer, 其 字段 为 id、customermame、address、 
mobile、company 和 country。 访 问 数 据 库 的 用 户 名 为 root， 密 码 为 1234。 

ji 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 AJAX 读 取 数 据 表 </title> 
<script type="text/javascript"> 
Var xmlHttp; 
function createxMLHttpRequest() { 
// 创 建 XMLHttpRequest 对 象 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest (); 
} else { 
xmlHttp = new ActiveXObject ("Microsoft .XMLHTTP"); 


} 
// 处 理 从 服务 器 返回 的 响应 
function processor() { 
// 响 应 完成 
if (xmlHttp.readyState == 4) { 
// 响 应 成 功 
if(xmlHttp.status == 200) { 
// 获 取 服 务 器 返回 的 字符 串 信息 
Var txt = xmlHttp.responseText; 
// 使 用 div_msg 显示 返回 的 字符 串 信息 
document .getElementById("div msg") .innerHTML = txt; 


} 
function show(info) { 
if(info.length == 0) { 
document .getElementById("div msg") .innerHTML = ""; 
return; 
} 
createxMLHttpRequest (); 
// 将 状态 触发 器 绑 定 到 函数 
XmlHttp .onreadystatechange = processor; 
// 通 过 请 求 参数 中 使 用 Math .random () 获取 随机 数 来 避免 使 用 缓存 中 的 数据 


xmlHttp.open ("GET", "GetDatabaseServlet?info=" + info + "&t="+ 


Math.random(), true); 
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// 发 送 请 求 
xmlHttp.send (null); 
} 
</script> 
</head> 
<body> 


<form action=""> 


<select name="customers" onchange="show (this.value)"> 


<option 

<option 

<option 

<option 

<option 

<option 
</select> 
<br /> 


value=""> 请 选择 一 位 客户 </option> 
value="wangmingming">wangmingming</option> 
value="limei">limei</option> 
value="zhangsan">zhangsan</option> 
value="lisi">lisi</option> 
value="liuwenhua">liuwenhua</option> 


<div id="div_msg"> 客 户 的 详细 信息 将 在 此 处 列 出 .. .</div> 


</form> 
</body> 
</html> 


GetDatabaseServlet: 


package cn.edu.qfnu.chl3.servlet; 


import java.io.IOException; 


import java.io.PrintWriter; 


import java.sql.Connection; 


import java.sql.DriverManager; 


import java.sql.Preparedstatement; 


import java.sql.ResultSset; 


import java.sql.SsQLException; 


import javax.servlet.ServletException; 


import javax.servlet.http.HttpServlet; 


import javax.servlet.http.HttpServletRequest; 


import javax.servlet.http.HttpServletResponse; 


public class GetDatabaseServlet extends HttpServlet { 


private static final long serialVersionUID = 1L; 


public GetDatabaseServlet() { 


super (); 
} 


protected void doGet (HttpServletRequest request, HttpServletResponse 
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response) throws ServletException, IOException { 
String driver = "com.mysql.jdbc.Driver"; 
String url = "jdbc:mysql://localhost:3306/test?user=rootgpassword= 
1234guseUnicode=truegcharacterEncoding=gbk"; 
response.setContentType ("text/html;charset=utf-8"); 
PrintWriter out=response.getWriter(); 
// 获 取 查 询 参 数 
request.setCharacterEncoding ("utf-8"); 
String info=request.getParameter ("info"); 


trey 
// 加 载 JDBC 驱动 
Class.forName (driver); 
// 获 取 数 据 库 连 接 
Connection conn = DriverManager.getConnection (url); 
// 设 置 查询 字符 串 
String sql="select * from Customer Where customername=?"7 
// 获 取 执行 SQL 语句 的 容器 
PreparedStatement pstmt=conn.PrepareStatement (sql); 
// 设 置 参数 
pstmt.setstring(1, info); 
// 获 取 结 果 集 Resultset 
ResultSet rs=pstmt .executeQuery(); 
// 输 出 结果 集中 的 内 容 


while(rs.next ()){ 
out.print ("id: "+rs.getInt (1)+"<br />"); 
out.print ("customername: "+rs.getstring(2)+"<br />"); 
out.print ("address: "+rs.getstring(3)+"<br />"); 
out.print ("mobile: "+rs.getstring(4)+"<br />"); 
out.print ("company: "+rs.getstring(5)+"<br />"); 
out.print ("country: "+rs.getstring(6)+"<br />"); 
out.print ("<br />"); 

} 

// 关 闭 结果 集 

if(rs!=null1)1{ 
rs.close(); 

} 

// 关 闭 SQL 容器 

if (pstmt!=null1){ 
pstmt .close(); 

站 

// 关 闭 连接 

if(conn!=null)t{ 
conn.close(); 

} 

} catch (ClassNotFoundException e) { 


e.printstackTrace () 7 

} catch (SQLException e) { 
e.printstackTrace (); 

上 

out .flush() 7 

out .close() 7 


protected void doPost (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
doGet (request, response); 


web.xml 中 关于 GetDatabaseServlet 的 配置 : 


<3ervlet> 
<servlet-name>GetDatabaseServlet</servlet-name> 
<servlet-class>cn.edu.qfnu.chl3.servlet.GetDatabaseServlet</servlet— 
class> 

</servlet> 

<servlet-mapping> 
<servlet-name>GetDatabaseServlet</servlet-name> 
<url-pattern>/GetDatabaseServlet</url-pattern> 


</servlet-mapping> 


请 求 js5.html， 当 更 改 下 拉 列 表 中 的 选项 时 ， 其 显示 结果 如 图 13-9 所 示 。 


lwangmingming 

1d:1 
customername:wangmingming 
address:beijing 
mobile:13666666666 
company-ABC 

country:China 


图 13-9 js5.html 的 显示 结果 


注意 : GetDatabaseServlet 中 使 用 JDBC 访问 MySQL 数据 库 ， 需 要 访问 MySQL 数据 
库 的 JDBC 驱动 程序 。 如 果 是 在 Eclipse 中 调试 程序 , 则 可 直接 将 驱动 程序 添加 到 项 目的 lib 
目录 下 。 
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AJAX 整合 了 几 种 Web 编程 技术 ， 例 如 HIML、CSS、JavaScript 等 。 

使 用 AJAX 可 以 异步 地 请 求 服务 器 的 资源 ， 例 如 Tomcat 服务 器 上 的 JSP、Servlet、 
XML 文件 等 。 

利用 AJAX 请 求 信息 时 ， 不 用 刷新 整个 页 面 ， 并 且 不 用 等 待 服务 器 端的 响应 。 
AJAX 可 以 优化 客户 端的 用 户 体验 ， 使 网 页 的 交互 效果 接近 于 桌面 应 用 程序 。 

使 用 AJAX 可 以 解析 XML 文件 ， 使 用 AJAX+Servlet 可 以 查询 数据 库 。 

但 是 AJAX 也 存在 一 些 本 身 的 缺陷 ，AJAX 会 使 浏览 器 上 的 后 退 按钮 失效 ， 浏 览 记 
录 无 法 使 用 ，AJAX 的 开发 和 调试 工具 欠缺 ， 不 容易 调试 ， 如 果 使 用 AJAX 去 请 求 
动态 资源 ， 需 要 结合 动态 资源 进行 调试 ， 比 较 烦 琐 ， 另 外 ，AJAX 破坏 了 程序 的 异 
常 机 制 ， 对 搜索 引擎 的 支持 不 好 。 即 便 如 此 ，AJAX 仍 有 着 非常 乐观 的 应 用 前 景 ， 
目前 ，AJAX 的 应 用 非常 广泛 。 


.以 下 不 属于 AJAX 技术 组 成 的 是 )。 


A. JavaScript 

B, CSS 

C. XMLHttpRequest 
D. WSDL 


.以 下 不 是 XMLHttpRequest 对 象 方法 或 属性 的 是 为 


A. open 

B. responseText 
C. receive 

D. send 


.如 何 解决 AJAX 中 JavaScript 脚本 的 缓存 问题 ? 

. XMLHttpRequest 对 象 在 低 版 本 的 正 中 和 在 正 7+ 及 Firefox 中 创建 有 何不 同 ? 
. AJAX 应 用 和 传统 的 Web 应 用 有 什么 不 同 ? 

.AJAX 如 何 获取 服务 器 端 返回 的 数据 ? 


jQuery 


随 着 JavaScript、CSS、AJAX 等 技术 的 不 断 进步 ， 出 现 了 许多 封装 好 了 的 功能 强大 的 
JavaScript 库 。jQuery 是 当前 最 流行 的 JavaScript 库 ， 它 封装 了 很 多 预定 义 的 对 象 和 实用 函 
数 。 jQuery 是 一 个 轻 量 级 的 JavaScript 库 , 压缩 之 后 只 有 几 十 KB, 它 与 CSS、 浏 览 器 兼容 。 

利用 jQuery， 用 户 可 以 更 方便 地 处 理 HTML 文档 、 事 件 、 实 现 动画 效果 、 与 AJAX 交 
互 及 创建 富有 特性 的 客户 端 页 面 等 。jQuery 的 理念 是 写 得 更 少 、 做 得 更 多 ， 即 利用 最 少 的 
代码 , 做 最 多 的 事情 。jQuery 是 免费 的 开源 的 , 其 源 代 码 中 包含 大 量 的 注释 和 说 明 。jQuery 
主要 有 以 下 特点 : 

。 jQuery 是 一 款 轻 量 级 的 JavaScript 框架 ， 不 影响 页 面 加 载 的 速度 ; 

。 jQuery 的 选择 器 使 用 方便 ， 便 于 操作 DOM 对 象 的 元 素 ; 

。 jQuery 的 链 式 操作 可 以 将 多 个 操作 写 在 同一 行 代码 内 ; 

。 jQuery 简化 了 对 CSS 和 AJAX 的 操作 ; 

。 jQuery 兼容 了 主流 的 大 部 分 浏览 器 ; 


jQuery 有 丰富 的 第 三 方 插件 的 支持 ， 例 如 树 状 菜单 、 日 期 控件 、 图 片 切换 工具 等 
jQuery 具有 很 好 的 可 扩展 性 ， 用 户 可 以 根据 自己 的 需要 增加 或 修改 函数 。 

如 果 要 使 用 jQuery， 需 要 下 载 jQuery 库 。jQuery 库 是 一 个 JavaScript 文件 ， 可 以 使 用 
<script> 标 签 进行 引用 。jQuery 有 两 个 版 本 : 一 个 是 Production version， 用 于 实际 的 网 站 ， 
已 被 精简 和 压缩 ， 另 一 个 是 Development version， 用 于 测试 和 开发 ， 未 经 压缩 ， 代 码 可 读 。 
两 个 版 本 的 jQuery 库 都 可 以 在 http:WiQuery.com/download/ 下 载 。 将 下 载 之 后 的 文件 放 在 页 
面 文件 目录 中 ， 然 后 通过 <script src="jquery-3.3.1.js"></scrip 人 进行 引用 。 

除了 jQuery， 还 有 一 些 其 他 的 JavaScript 库 ， 如 MooTools、Prototype、Dojo、DWR 等 。 

例如 ，jql.html， 利 用 jQuery， 在 页 面 成 功 加 载 之 后 弹出 一 个 对 话 框 。 

jql.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
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<title> 利 用 JQuery 在 页 面 装载 完成 后 弹出 一 个 对 话 框 </tit1le> 
<script src="]jquery-3.3.1.js"> 
</script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
alert ("Hello World!™"); 
区 去 
</seript> 
</head> 
<body> 
</body> 
</html> 


使 用 浏览 器 打开 jql.html， 当 页 面 载 入 完成 后 ， 会 弹出 对 话 框 。 


442 jQuey 选择 器 


在 CSS 中 ， 选 择 器 〈 或 选择 符 ) 的 作用 是 选择 页 面 中 的 某 一 类 元 素 或 者 某 一 个 元 素 。 
jQuery 中 的 选择 器 使 用 “$”， 也 是 选择 元 素 ， 但 是 其 方式 更 全 面 ， 而 且 也 不 存在 浏览 器 的 
兼容 问题 。 jQuery 选择 器 允许 通过 标签 名 、 属性 名 或 内 容 对 HTML 元 素 进行 选择 或 者 修改 
HTML 元 素 的 样式 属性 。jQuery 的 选择 器 很 多 ， 可 以 分 为 基本 选择 器 、 层 次 选择 器 、 过 滤 
选择 器 和 属性 过 滤器 。jQuery 选择 器 的 通用 语法 为 : 

$ (selector) 


1. 基本 选择 器 

基本 选择 器 包括 id 选择 器 、element 选择 器 、class 选择 器 、* 选 择 器 以 及 并 列 选择 器 等 。 

1) id 选择 器 

id 选择 器 可 以 根据 指定 的 id 值 返 回 一 个 唯一 的 元 素 。 例 如 ，S$("#my") 为 选择 id 值 为 
my 的 第 一 个 元 素 。 

例如 ，jq2.html， 当 单 击 按钮 后 ， 将 id 值 为 my 的 div 的 背景 色 设 置 成 橙色 。 

jq2 html， 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 改变 一 个 DIV 的 背景 色 </title> 
<script src="jquery-3.3.1.js"></script> 
<script type="text/javascript"> 


$ (document) .ready (function() { 


$ ("input") .click(function() { 
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Ds 
Fs 
</script> 
</head> 
<body> 


$ ("#my") .css ("background-color", 


<div id="my"> 这 是 一 个 id 值 为 my 的 DIV</div> 
<div> 这 是 一 个 DIV， 没 有 指定 id 值 </div> 


<input type="button" value=" 改 变 第 一 个 DIV 的 背景 色 "” /> 


</body> 
</html> 


"orange"); 


打开 jq2.html， 单 击 按钮 后 的 显示 结果 如 图 14-1 所 示 。 


2) element 选择 器 


国医 加 
/ D tm x (. 


CG 合 |@ 1270018. 人 女 | 


这 是 一 个 DIV， 没 有 指定 id 值 


改变 第 一 个 DIV 的 背景 色 


图 14-1 jq2.html 的 显示 结果 


element 选择 器 可 以 根据 HTML 标签 选择 一 组 元 素 。 例 如 : 
。 $("p") 为 选择 页 面 中 所 有 的 p 元 素 ; 
。 $("input") 为 选择 页 面 中 所 有 的 input 元 素 。 


例如 ，jq3.html， 当 单 击 页 面 上 的 元 素 时 ， 被 单 击 的 元 素 会 隐藏 。 


jq3 html， 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 
<title> 单 击 按钮 ， 使 按钮 消失 </title> 


<script src="jquery-3.3.1.js"> 


</script> 


<script type="text/javascript"> 


$ (document) .ready (function() { 


$ ("input") .click(function() { 


$ (this) .hide(); 
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</serint> 

</head> 

<body> 
<input type="button" value=" 单 击 我 会 消失 " /><br /> 
<input type="button" value=" 单 击 我 会 消失 " /><br /> 
<input type="button" value=" 单 击 我 会 消失 " /><br /> 
<input type="text" value=" 单 击 我 也 会 消失 " /> 

</body> 

</html> 


使 用 浏览 器 打开 jq3.html， 显 示 结 果 如 图 14-2 所 示 。 当 单 击 元 素 时 ， 被 单 击 的 元 素 会 
在 页 面 上 消失 。 


eles 
/ 口 单 击 按钮 ， 使 5 X NJ“ 
C 全 11270018 六 | 


单 击 我 会 消失 
单 击 我 会 消失 


单 击 我 会 消失 
单 击 我 也 会 消失 


图 14-2 jq3.html 的 显示 结果 


3) class 选择 器 

class 选择 器 可 以 根据 元 素 的 class 类 选择 一 组 元 素 。 例 如 : 

。 $(".left") 为 选择 页 面 中 所 有 的 class 为 left 的 元 素 ; 

。 $("p.left") 为 选择 页 面 中 所 有 的 class 为 left 的 p 元 素 。 

例如 ，jq4.html， 当 单 击 按钮 时 ， 更 改 所 有 class 为 left 的 元 素 的 背景 色 。 
Jjq4.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 改变 一 类 DIV 的 背景 色 </title> 
<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
.left { 
font-size: 12px; 
background-color: #FFEBCD; 
} 
</style> 


<script type="text/javascript"> 
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$ (document) .ready (function() { 
$ ("#change") .click (function() { 
$(".left") .css("background-color", "orange"); 
由 训 
ys 
</script> 
</head> 
<body> 
<div class="left"> 这 是 一 个 class 为 left 的 DIV</div> 
<div> 这 是 一 个 DIV， 没 有 指定 class 值 </div> 
<div class="left"> 这 也 是 一 个 class 为 left 的 DIV</div> 
<p class="left"> 这 是 一 个 class 为 left 的 p</p> 
<input id="change" type="button" value=" 改 变 left 类 元 素 的 背景 色 " /> 
</body> 
</html> 


jq4 html 的 显示 结果 如 图 14-3 所 示 ， 当 单 击 按钮 后 的 显示 结果 如 图 14-4 所 示 。 


/Ds xm 


C 合 10 12700180.， 女 


/DD Wm x NG 


| GC 合 |@ 17.00.180.. 女 | 


这 是 一 个 class 为 aa 的 
| 这 是 一 个 DIV， 没有 指证 du 值 这 是 一 个 DIV， 没 有 指定 class 值 
这 也 是 一 个 class 为 leagyDIV 
这 是 一 个 dlass 为 latfyp 
改变 lef 类 元 素 的 背景 色 
图 14-3 jq4.html 的 初始 显示 结果 图 14-4 单 击 按钮 之 后 的 显示 结果 
4) * 选 择 器 
* 选 择 器 可 以 选择 页 面 中 所 有 的 HTML 元 素 。 
例如 : 


。 $("*") 为 选择 页 面 中 所 有 的 HTML 元 素 ; 
。 $("table *") 为 选择 页 面 中 table 下 的 所 有 的 元 素 ; 空格 为 不 限 层次 数 的 层次 选择 器 ， 


后 面 有 详细 介绍 ; 
。 $("form *") 为 选择 页 面 中 form 下 的 所 有 的 元 素 。 
5) 并 列 选择 器 


并 列 选择 器 指 的 是 使 用 去 号 隔 开 的 选择 符 ， 彼 此 之 间 是 并 列 关 系 。 例 如 : 

。 $("p, div") 为 选择 页 面 中 所 有 的 p 元 素 和 div 元 素 ; 

。 $("#my, p, .left") 为 选择 页 面 中 id 为 my 的 第 一 个 元 素 、 所 有 的 p 元 素 以 及 所 有 class 
为 left 的 元 素 。 

2. 层次 选择 器 

层次 选择 器 可 以 根据 页 面 中 的 HTML 元 素 之 间 的 嵌 套 关系 来 选择 元 素 ， 主 要 包括 
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ancestor descendant 选择 器 、parent > child 选择 器 、prev + next 选择 器 、prev ~ siblings 选 
择 器 。 

1) ancestor descendant 选择 器 

ancestor descendant 选择 器 指 的 是 祖先 子孙 选择 器 ,选择 符 之 间 使 用 空格 隔 开 ,不 限制 
嵌 套 层次 数 。 例 如 : 

。 $(".left p") 为 选择 所 有 class 为 left 的 元 素 中 的 所 有 的 p 元 素 ; 

。 $("form input") 为 选择 所 有 的 form 元 素 中 的 input 元 素 。 

例如 ，jq5.html， 当 单 击 按钮 时 ， 更 改 div 元 素 中 所 有 的 span 元 素 的 字体 颜色 。 

jq5.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 改变 div 中 所 有 span 的 字体 颜色 </title> 
<script src="jquery-3.3.1.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#change") .click (function() { 
$ ("div span") .css("color", "orange"); 
1D); 
DD); 
</script> 
</head> 
<body> 
<div> 
<span> 这 是 直接 包含 在 div 中 的 span</span> 
<p> 
<span> 这 是 包含 在 div 中 的 p 中 的 span</span> 
</p> 
</div> 
<span> 这 不 是 包含 在 div 中 的 span</span> 
<input id="change" type="button" value=" 改 变 div 中 所 有 span 的 字体 颜色 " /> 
</body> 
</html> 


打开 jq5.html， 并 单 击 按钮 之 后 的 显示 结果 如 图 14-5 所 示 ，div 中 所 有 的 span 的 字体 
颜色 都 会 改变 。 

2) parent > child 选择 器 

parent > child 选择 器 指 的 父子 选择 器 ， 中 间 使 用 “>” 隔 开 ， 前 后 元 素 的 嵌 套 关系 只 能 
是 一 层 。 例 如 ，$("div > p") 为 选择 div 元 素 内 直接 霸 套 的 p 元 素 。 

例如 ，jq6.html， 改 变 div 中 直接 包含 的 span 的 字体 颜色 。 
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jq6 .html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 改变 div 中 直接 包含 的 span 的 字体 颜色 </title> 
<script src="jquery-3.3.1.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#change") .click (function() { 
$ ("div>span") .css ("color", "orange"); 
1); 
]) 
</script> 
</head> 
<body> 
<div> 
<span> 这 是 直接 包含 在 div 中 的 span</span> 
<p> 
<span> 这 是 包含 在 div 中 的 p 中 的 span</span> 
</p> 
</div> 
<span> 这 不 是 包含 在 div 中 的 span</span> 
<input id="change" type="button" value=" 改 变 div 中 直接 包含 的 span 的 字体 
颜色 "” /> 
</body> 
</html> 


打开 jq6.html， 并 且 单 击 按钮 后 的 显示 结果 如 图 14-6 所 示 ， 只 有 直接 包含 在 div 中 的 
span 的 字体 颜色 会 改变 。 


[ elie]| ee 二 | 
/ D id x \、 / Sv x 人 
C 合 10 127001802. 公 | : | | C 合 |0 127001802. 公 | : | 
昌 na 
这 不 是 包含 在 div 中 的 span 这 不 是 包含 在 div 中 的 span 
改变 div 中 所 有 span 的 字体 颜色 改变 dv 中 所 有 span 的 字体 颜色 
后 A > | 
图 14-5 jq5.html 的 显示 结果 图 14-6 jq6.html 的 显示 结果 


3) prev + next 选择 器 
prev + next 选择 器 可 以 选择 下 一 个 同 级 的 兄弟 元 素 ,prev 和 next 是 两 个 同 级 别 的 元 素 ， 
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中 间 使 用 “+” 分 隔 ， 选 择 在 prev 元 素 后 面 的 next 元 素 ， 相 当 于 next0) 方 法 ， 例如 : 
$("#my+timg") 为 选择 id 为 my 的 元 素 后 的 第 一 个 同 级 别 img 元 素 ; 相当 于 : 


$ ("my") next (wimg") 
$(".lefttdiv") 为 选择 class 为 left 的 元 素 的 下 一 个 同 级 别 div 元 素 ; 相当 于 : 
$ (".1left") .next ("div") 


例如 ，jq7.html， 改 变 class 为 left 的 下 一 个 同 级 别 div 元 素 的 字体 颜色 。 
jq7.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 改变 兄弟 元 素 的 字体 颜色 </title> 
<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
-left { 
background-color: #FFEBCD; 
} 
body { 
font-size: 12px; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#change") .click (function() { 
$(".left+div") .css ("color", "orange"); 
1); 
DD); 
</script> 
</head> 
<body> 
<p class="left"> 这 是 段落 , class=left</p> 
<div>class 为 left 的 元 素 后 的 第 一 个 div 元 素 </div> 
<div>class 为 left 的 元 素 后 的 第 二 个 div 元 素 </div> 
<span class="left"> 这 是 span, class=left</span> 
<div>class 为 left 元 素 后 的 第 一 个 div 元 素 </div> 
<input id="change" type="button" value=" 改 变 兄 弟 元 素 的 字体 颜色 " /> 
</body> 
</html> 


在 浏览 器 中 打开 jq7.html， 单 击 按钮 后 的 显示 结果 如 图 14-7 所 示 。 
4) prev ~ siblings 选择 器 


prev ~ siblings 选择 器 用 于 选择 prev 元 素 的 所 有 的 兄弟 元 素 , 相当 于 nextAll0 方 法 , 可 


以 选择 出 现在 prev 元 素 之 后 的 和 其 为 同一 级 别 的 所 有 的 元 素 。 例 如 : 
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这 是 段落 ,class=let 


class 为 le 元 素 后 的 第 二 个 div 元 素 
这 是 span.class=left 本 


改变 兄弟 元 素 的 字体 颜色 | 


图 14-7 jq7.html 的 显示 结果 


$("#my~img") 为 选择 id 为 my 的 元 素 后 的 所 有 的 同 级 别 img 元 素 ， 相当 于 : 

$ ("#my") .nextAll ("img") 

$(".left~div") 为 选择 class 为 left 的 元 素 之 后 的 所 有 同 级 别 的 div 元 素 ; 相当 于 : 
$(".left") .nextAll ("div") 


例如 ，jq8.html， 改 变 所 有 兄弟 元 素 的 字体 颜色 。 
jq8.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 改变 所 有 兄弟 元 素 的 字体 颜色 </title> 
<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
Loft 洒 
background-color: #FFEBCD; 


body { 
font-size: 12px; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#change") .click (function() { 
$(".left~div") .css("color", "orange"); 
TD 
]) 7 
</script> 
</head> 
<body> 
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<p class="left"> 这 是 段落 , class=left</p> 
<div>class 为 left 的 元 素 后 的 第 一 个 div 元 素 </div> 
<div>class 为 left 的 元 素 后 的 第 二 个 div 元 素 </div> 
<span class="left"> 这 是 span, class=left</span> 
<div>class 为 left 元 素 后 的 第 一 个 div 元 素 </div> 
<input id="change" type="button" value=" 改 变 所 有 兄弟 元 素 的 字体 颜色 " /> 
</body> 
</html> 


在 浏览 器 中 打开 jq8.html， 并 单 击 按钮 后 的 显示 结果 如 图 14-8 所 示 。 
国医 上 


/ D Pe x CN 
C HO |0 127.001:8.. 女 | : 


这 是 段落 ,class=left 


这 radar 


政变 所 有 兄弟 元 素 的 字体 颜色 


图 14-8 jq8.html 的 显示 结果 


3. 过 滤 选 择 器 

过 滤 选 择 器 可 分 为 基本 过 滤器 、 内 容 过 滤器 、 可 见 性 过 滤器 、 属 性 过 滤器 等 。 过 滤 选 
择 器 可 以 根据 元 素 的 内 容 和 索引 等 对 元 素 进行 选择 。 

1) 基本 过 滤器 

基本 过 滤器 可 以 根据 元 素 的 特点 和 索引 选择 元 素 ， 基 本 过 滤器 如 表 14-1 所 示 。 


表 14-1 基本 过 滤器 
选择 器 说 明 
:first 匹配 找到 的 第 一 个 元 素 
:last 匹配 找到 的 最 后 一 个 元 素 
:not(selector) 去 除 所 有 与 给 定 选 择 器 匹配 的 元 素 
:even 匹配 所 有 索引 值 为 偶数 的 元 素 ， 例 如 $("tr:even") 
:odd 匹配 所 有 索引 值 为 奇数 的 元 素 ， 例 如 $("tr:odd") 
:eq(index) 匹配 一 个 给 定 索引 值 的 元 素 
:gt(index) 匹配 所 有 大 于 给 定 索引 值 的 元 素 
:lt(index) 匹配 所 有 小 于 给 定 索引 值 的 元 素 
:header 匹配 所 有 标题 
:animated 匹配 所 有 正在 执行 动画 效果 的 元 素 


例如 ，jq9.html， 当 单 击 按钮 时 ， 使 表格 按 行 间隔 变色 。 
jq9 html: 


在 浏览 器 中 打开 jq9.html， 单 击 按钮 后 的 显示 结果 如 图 14-9 所 示 。 
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第 四 行 
第 五 行 
表格 按 行 间隔 变色 


图 14-9 jq9.html 的 显示 结果 


2) 内 容 过 滤器 
内 容 过 滤器 可 以 根据 元 素 包含 的 文字 内 容 选 择 元 素 ， 内 容 过 滤器 及 其 说 明 如 表 14-2 
所 示 。 


表 14-2 ”内 容 过 滤器 


选择 器 说 明 

:contains(text) 匹配 包含 给 定 文本 的 元 素 

:emptyO 匹配 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 
:has(selector) 匹配 含有 选择 器 所 匹配 的 元 素 的 元 素 

:parentO) 匹配 含有 子 元 者 文本 的 元 素 ， 与 :empty0 相 反 


例如 ，jql0.html， 当 单 击 按钮 时 ， 选 择 表格 中 包含 apple 的 单元 格 ， 并 更 改 样式 。 
jqlo html; 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 单 击 按钮 选择 包含 特定 文字 的 单元 格 </title> 
<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
tablef 
width:200px; 


x 
font-size: 16px; 
border: lpx solid #FF9600; 
3 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#change") .click (function() { 


$ ("td:contains('apple')") .css("color", "red"); 


AS 


在 放生 和 条 征调 的 和 -html， 种 相 饮 局 朋 虹 未 纺 果 基因 14-10 所 示 。 


图 14-10 jq10.html 的 显示 结果 
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3) 可 见 性 过 滤器 

可 见 性 过 滤器 可 以 根据 元 素 的 可 见 性 进行 选择 ， 可 见 性 过 滤器 包括 :hidden 
和 :visible。:hidden 可 以 匹配 所 有 不 可 见 的 元 素 ，:visible 可 以 匹配 所 有 可 见 的 元 素 。 例 如 : 

。 $("td:hidden") 为 匹配 所 有 不 可 见 的 td 元 素 ; 

。 $("td:visible") 为 匹配 所 有 可 见 的 td 元 素 。 

jQuery1.3.2 之 后 的 :hidden 选择 器 仅仅 匹配 display 为 none 的 元 素 或 者 <input type= 
"hidden"/> 的 元 素 ， 即 只 匹配 隐藏 的 ， 并 且 不 占 空间 的 元 素 。 对 于 那些 隐藏 的 ， 但 仍然 占 空 
间 的 元 素 ， 则 被 排除 在 外 。 

4) 属性 过 滤器 

属性 过 滤器 可 以 根据 元 素 的 属性 值 匹 配 元 素 ， 属 性 过 滤器 及 其 说 明 如 表 14-3 所 示 。 

表 14-3 属性 过 滤器 


选择 器 说 明 

[attribute] 匹配 包含 给 定 属性 的 元 素 

[attribute=value] 匹配 给 定 属性 为 特定 值 的 元 素 

[attribute!=value] 匹配 给 定 属性 不 等 于 特定 值 的 元 素 

[attribute^=value] 匹配 给 定 属性 是 以 特定 值 开头 的 元 素 

[attribute$=value] 匹配 给 定 属性 是 以 特定 值 结尾 的 元 素 

[attribute*=value] 匹配 给 定 属 性 包含 特定 值 的 元 素 

[attributeFilterl][attributeFilter2][.….] 复合 属性 选择 器 ， 匹 配属 性 同时 满足 多 个 条 件 的 元 素 
例如 ，jqll.html， 在 页 面 加 载 完成 时 ， 更 改 所 有 包含 href 属性 的 a 元 素 的 样式 。 
jqll.html; 

<!DOCTYPE html> 

<html> 
<head> 


<meta charset="utf-8" /> 
<title> 在 页 面 装载 完成 后 更 改 部 分 超级 链接 的 样式 </title> 
<script src="jquery-3.3.1.js"> 
</script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$ ("altitle]") .css("color", "#FF9600"); 
$ ("a[ltitle]") .css("font-size", "12px"); 
$ ("a[ltitle]") .css("text-decoration", "none"); 
3 
</script> 
</head> 
<body> 
<a href="#" title="first"> 第 一 个 包含 title 属性 的 a 元 素 </a><br /> 
<a href="#"> 第 一 个 不 包含 title 属性 的 a 元 素 </a><br /> 
<a href="#" title="second"> 第 二 个 包含 title 属性 的 a 元 素 </a><br /> 
<a href="#"> 第 二 个 不 包含 title 属性 的 a 元 素 </a><br /> 
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<a href="#" title="third"> 第 三 个 包含 title 属性 的 a 元 素 </a> 


</body> 
</html> 


在 浏览 器 中 打开 jqll.html， 其 显示 结果 如 图 14-11 所 示 。 


/ D ems: x \ 


C 全 |@1270018.. 俊 


图 14-11 jq11.html 的 显示 结果 


4. 表单 选择 器 
表单 选择 器 用 于 选择 表单 中 的 元 素 ， 包 括 的 选择 器 如 表 14-4 所 示 。 
表 14-4 表单 选择 器 

选择 器 说 明 
:input 匹配 所 有 的 <input> 元 素 
:text 匹配 所 有 的 type="text" 的 <input> 元 素 
:password 匹配 所 有 的 type="password" 的 <input> 元 素 
:Tadio 匹配 所 有 的 type="radio" 的 <input> 元 素 
:checkbox 匹配 所 有 的 type="checkbox" 的 <input> 元 素 
:submit 匹配 所 有 的 type="submit" 的 <input> 元 素 
:Teset 匹配 所 有 的 type="reset" 的 <input> 元 素 
:button 匹配 所 有 的 type="button" 的 <inpu 人 > 元 素 
:image 匹配 所 有 的 type="image" 的 <input> 元 素 
:file 匹配 所 有 的 type="file" 的 <input> 元 素 
:enabled 匹配 所 有 激活 的 <input> 元 素 
:disabled 匹配 所 有 禁用 的 <input> 元 素 
:selected 匹配 所 有 被 选取 的 <input> 元 素 
:checked 匹配 所 有 被 选中 的 <input> 元 素 


除了 以 上 选择 器 之 外 ，jQuery 的 选择 器 还 包括 子 元 素 选 择 器 与 表单 过 滤器 等 。 
(143 jQuery 的 事件 处 理 


jQuery 是 专门 为 事件 处 理 而 设计 的 , 事件 处 理 程序 是 当 HTML 页 面 中 发 生 某 些 事件 时 
所 调用 的 方法 。 在 jQuery 中 ， 通 常 把 事件 处 理 放置 在 HTML 页 面 中 的 <head> 部 分 。 为 了 
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增加 代码 的 可 重用 性 ， 也 可 以 将 jQuery 的 事件 处 理 程序 放置 在 单独 的 JavaScript 文件 中 ， 


然后 在 需要 引用 的 文件 中 引 上 


保存 在 JavaScript 文件 中 ， 将 事件 处 理 函 数 置 于 文档 的 就 绪 事件 处 理 器 中 。jQuery 中 的 事 
件 处 理 可 以 分 为 浏览 器 相关 事件 、 表 单 相关 事件 、 键 盘 相 关 事件 、 鼠 标 操 作 相关 事件 、 殿 


。 为 了 便于 理解 ， 本 书 的 例子 都 是 直接 将 事件 处 理 程序 放 在 
<head> 中 。 为 了 使 代码 易于 维护 ， 一 般 要 将 所 有 的 jQuery 代码 署 于 处 理 函数 中 ， 并 且 单独 


他 事件 。jQuery 中 常用 的 事件 及 其 说 明 如 表 14-5 所 示 。 
表 14-5 jQuery 中 的 事件 方法 


Event 函数 说 明 

$(document).ready(function) 将 函数 绑 定 到 文档 的 加 载 完成 事件 
S$(selector).click(function) 触发 或 将 函数 绑 定 到 元 素 的 onClick 事件 
S$(selector).focus(function) 触发 或 将 函数 绑 定 到 元 素 的 onFocus 事件 
S$(selector).blur(function) 触发 或 将 函数 绑 定 到 元 素 的 onBlur 事件 
S$(selector).change(function) 触发 或 将 函数 绑 定 到 元 素 的 onChange 事件 
S$(selector).keydown(function) 触发 或 将 函数 绑 定 到 元 素 的 onKeyDown 事件 
S$(selector).keypress(function) 触发 或 将 函数 绑 定 到 元 素 的 onKeyPress 事件 
S$(selector).keyup(function) 触发 或 将 函数 绑 定 到 元 素 的 onKeyUp 事件 
S$(selector).mousedown(function) 触发 或 将 函数 绑 定 到 元 素 的 onMouseDown 事件 
S$(selector).mousemove(function) 触发 或 将 函数 绑 定 到 元 素 的 onMouseMove 事件 
S$(selector). mouseout(function) 触发 或 将 函数 绑 定 到 元 素 的 onMouseOut 事件 
S$(selector). mouseover(function) 触发 或 将 函数 绑 定 到 元 素 的 onMouseOver 事件 
S$(selector). mouseup(function) 触发 或 将 函数 绑 定 到 元 素 的 onMouseUp 事件 
S$(selector).submit (function) 触发 或 将 函数 绑 定 到 元 素 的 onSubmit 事件 


S$(selector). toggle(event, function) 
$(selector).bind(event, function) 
S$(selector).unbind(event, function) 
$(selector).one(event, function) 


绑 定 两 个 或 多 个 事件 处 理 
向 匹配 元 素 附加 一 个 或 更 
从 匹配 元 素 移 除 一 个 被 添 
向 匹配 元 素 添 加 事件 处 理 


函数 ， 当 发 生 轮流 的 onClick 事件 时 执行 
多 的 事件 处 理 器 

加 的 事件 处 理 器 

器 ， 每 个 元 素 只 能 触发 一 次 该 处 理 器 


例如 ，jq12.html， 单 击 按钮 时 显示 半 透 明 的 DIV，DIV 可 以 随 鼠 标的 移动 而 移动 。 


jq12.html: 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 


<script src="jquery-3.3.1.js"></script> 
<script type="text/javascript"> 
var show = function() { 
$ ("body") .append ("<div id="'mydiv' style='background:#00BFFF; 
position:absolute;width:100px;height:100px'> 可 以 拖 动 的 半 透 明 
div</div>"); 
$ ("#mydiv") .fadeTo ("slow", 0.5); 
$ ("#mydiv") .mousedown (function(event) { 
Var offset = $("#mydiv") .offset (); 
Xl = event.clientXx - offset.left; 
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yl = event-clientY - offset.top; 

$ ("#mydiv") .mousemove (function (event) { 
$("#mydiv") .css ("left", (event.clientx - x1) + "px"); 
$("#mydiv") .css ("top", (event.clienty - yl) + "px"); 

i 

$ ("#mydiv") .mouseup (function (event) { 
$ ("#mydiv") .unbind ("mousemove"); 


Ds 
| 

</script> 
</head> 
<body> 

<input type="button" value=" 显 示 DIV" onclick="show()" /> 
</body> 

</html> 


在 浏览 器 中 打开 jq12.html， 显 示 结 果 如 图 14-12 所 示 ， 使 用 鼠标 拖 动 之 后 的 显示 结果 
如 图 14-13 所 示 。 
2 [alo 坟 
/ D 0018070 x 全 二 
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显示 DIV 显示 DIV | 
i (saov) ye 
透明 div 透明 div 
图 14-12 jq12.html 的 显示 结果 图 14-13 jq12.html 中 拖 动 DIV 之 后 的 显示 结果 


(4 jQuery 的 特效 


使 用 jQuery 可 以 很 方便 地 实现 页 面 元 素 的 特殊 效果 ， 比 如 隐藏 、 显 示 、 淡 入 、 淡 出 、 
滑动 以 及 动画 等 。 

1. 隐藏 和 显示 

jQuery 中 的 show0 方 法 和 hide() 方 法 可 以 控制 元 素 的 显示 和 隐藏 。 其 语法 如 下 : 

$ (selector) .hide (speed, callback); 


$ (selector) .show (speed, callback); 


其 中 ，speed 是 可 选 参数 ， 表 示 显 示 或 者 隐藏 的 速度 ， 可 取 slow、fast 或 者 以 毫秒 为 单 
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位 的 数值 ; callback 是 可 选 参数 ,表示 显示 或 者 隐藏 后 需要 执行 的 函数 名 称 。 例 如 ,jq13.html， 
实现 了 一 个 简单 的 下 拉面 板 。 
jq13.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 一 个 简单 的 下 拉面 板 </title> 
<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
#first { 
position: absolute; 
left: 20px; 
top: 20px; 
width: 120px; 
height: 20px; 
background-color: #FF99CC; 
font-size: 14px; 
font-family: 楷体 ; 
text-align: center; 
} 
#second { 
position: absolute; 
left: 20px; 
top: 40px; 
width: 150px; 
height: 80px; 
background-color: #99CC00; 
border: 2px solid #FF99CC; 
font-size: 18px; 
font-family: 楷体 ; 
text-align: center; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
语 lick(ttunction(y 
$ ("#second") .slideToggle ("slow"); 
Ts 
]) 
</script> 
</head> 
<body> 
<div id="first"> 隐 藏 /显示 面板 </div> 
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<div id="second"> 
春 眠 不 觉 晓 ，<br /> 
处 处 闻 啼 鸟 。<br /> 
夜来 风雨 声 ，<br /> 
花 落 知 多 少 。<br /> 

</div> 

</body> 
</html> 


在 浏览 器 中 打开 jq13.html， 其 显示 结果 如 图 14-14 所 示 ， 单 击 “ 隐 藏 /显示 面板 ”按钮 
后 显示 结果 如 图 14-15 所 示 。 


eels 


C0 [Bio 人 : 


14-14 jq13.html 的 显示 结果 图 14-15 ”隐藏 面板 以 后 的 显示 结果 


注意 : 上 述 代码 中 的 slideToggle() 方 法 是 使 用 滑动 效果 来 更 改元 素 的 可 见 状态 。 如 果 
被 选择 的 元 素 是 可 见 的 ， 则 隐藏 元 素 ; 如 果 被 选择 的 元 素 是 隐藏 的 ， 则 显示 元 素 。 其 语法 
格式 如 下 : 

$ (selector) .slideToggle (speed, callback); 


其 中 ，speed 和 callback 参数 的 含义 与 slide() 方 法 中 的 参数 相同 。 
2. 淡 入 和 淡出 
jQuery 可 以 很 方便 地 实现 元 素 的 淡 入 和 淡出 的 效果 。 
1) 淡 入 效果 
jQuery 的 fadeIn() 方 法 用 于 实现 淡 入 已 隐藏 的 元 素 。 其 语法 如 下 : 
$ (selector) .fadeIn (speed, callback); 
2) 淡出 效果 
jQuery 的 fadeOut() 方 法 用 于 实现 淡出 可 见 的 元 素 。 其 语法 如 下 : 
$ (selector) .fadeout (speed, callback); 


3) 淡 入 和 淡出 切换 效果 
jQuery 的 fadeToggle0 方 法 可 以 在 淡 入 和 淡出 之 间 切 换 。 如 果 元 素 已 淡出 ， 则 执行 
fadeToggle() 会 使 元 素 淡 入 ; 如 果 元 素 已 淡 入 ， 则 执行 fadeToggle0 会 使 元 素 淡出 。 其 语法 
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如 下 : 

$ (selector) .fadeToggle (speed, callback); 

4) 渐变 效果 

jQuery 的 fadeTo( 方 法 可 以 实现 元 素 的 渐变 效果 。 其 语法 如 下 : 

$ (selector) .fadeTo (speed, opacity, callback); 
其 中 ，speed 和 callback 的 含义 与 其 他 方法 中 的 参数 相同 ，opacity 指 的 是 渐变 的 不 透明 度 ， 
取 值 范围 为 0 一 1。 例 如 ，js14.html， 为 jQuery 的 淡 入 和 淡出 的 效果 实例 。 

js14.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 淡 入 淡出 效果 </title> 
<script src="jquery-3.3.1.js"></script> 
<style> 
input { 
width: 80px; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#fIn") .click (function() { 
$ ("#div") .fadeIn ("slow"); 
Ty 
$("#f0ut") .click (function() { 
$ ("#div") .fadeout ("slow"); 
1); 
$ ("#fToggle") .click (function() { 
$ ("#div") .fadeToggle ("slow"); 
]) 
S$S("#fTon) .click (function() { 
$("#div") .fadeTo ("slow", 0.2); 
DD); 
DD); 
“soript> 
</head> 
<body> 
<input id="fIn" type="button" value=" 淡 入 " /><br /><br /> 
<input id="fout" type="button" value=" 淡 出 " /><br /><br /> 
<input id="fToggle" type="button" value=" 淡 入 /淡出 " /><br /><br /> 
<input id="fTo" type="button" value=" 渐 变 " /> 
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<div id="div" style="position:absolute;top:15px;left:100px;width: 


100px;height:100px;background-color:red"></div> 
</body> 
</html> 


在 浏览 器 中 打开 jq14.html 页 面 ， 显 示 效 果 如 图 14-16 所 示 。 单 击 相应 的 按钮 可 以 实现 
不 同 的 淡 入 淡出 效果 。 


淡 入 /淡出 
渐变 


图 14-16 js14.html 的 显示 结果 


3. 滑动 效果 
使 用 jQuery 可 以 实现 元 素 的 滑动 效果 。 
1) 向 下 滑动 


向 下 滑动 使 用 slideDown() 方 法 实现 ， 其 语法 如 下 : 

$ (selector) .slideDown (speed, callback); 
其 中 ，speed 和 callback 的 含义 同 前 文中 的 方法 。 

2) 向 上 滑动 

向 上 滑动 使 用 slideUp0 方 法 实现 ， 其 语法 如 下 : 

$ (selector) .slideUp (speed, callback); 

3) 向 下 或 各 上 滑动 

如 果 要 在 向 下 滑动 和 向 上 滑动 之 间 切 换 ， 可 以 使 用 slideToggle() 方 法 ， 其 语法 如 下 : 

$ (selector) .slideToggle (speed, callback); 

例如 ，jq15.html， 实 现 了 div 的 滑动 效果 。 

jq1l5.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 滑 动 效 果 </title> 
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<script src="jquery-3.3.1.j]s"></script> 
<style> 
input { 
width: 100px; 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#sDown") .click (function() { 
$("#div") .slideDown ("slow"); 
下 
$("#sUp") .click (function() { 
$("#div") .slideUp ("slow"); 
3 
$("#sToggle") .click (function() { 
$("#div") .slideToggle ("slow"); 


1); 
Ws 
</script> 
</head> 
<body> 


<input id="sDown" type="button" value=" 向 下 滑动 " /><br /> 
<input id="sUp" type="button" value=" 向 上 滑动 " /><br /> 
<input id="sToggle" type="button" value=" 向 下 /向 上 滑动 " /><br /> 
<div id="div" style="position:absolute;top:15px;left:115px;width: 
100px;height:100px;background-color:red"></div> 
</body> 
</html> 


在 浏览 器 中 打开 jq15.html， 其 显示 结果 如 图 14-17 所 示 。 当 单 击 “ 向 上 滑动 ”按钮 时 ， 
红色 背景 的 DIV 会 向 上 滑动 至 消失 ,再 单 击 “ 向 下 滑动 ”按钮 时 ，DIV 会 出 现 并 向 下 滑动 。 
Ele 

口 滑动 效果 x 
| GC 合 |© 127.00.1:8 


[向 下 入 动 


| 向 上 滑动 | 


| 向 下 /向 上 滑动 


图 14-17 jq15.html 的 显示 结果 


4. 动画 效果 
使 用 jQuery 的 animate0) 方 法 可 以 创建 自 定义 的 动画 ， 其 语法 如 下 : 


$ (selector) .animate ({params}, duration, easing, callback); 


params 是 必需 的 参数 ， 可 以 定义 形成 动画 的 CSS 属性 ; 
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。 speed 是 可 选 参数 ， 指 动画 的 时 长 ， 可 取 slow、fast 或 者 以 毫秒 计 的 数值 ; 


callback 是 可 选 参数 ， 指 动画 完成 之 后 执行 的 函数 。 


在 animate() 方 法 中 ,可 以 同时 操作 一 个 元 素 的 几乎 全 部 的 CSS 属性 , 也 可 以 为 一 个 元 


素 指 定 多 个 animate() 效 果 。 例 如 ，jq16.html， 给 div 添加 动画 效果 。 


jq16.html: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 滑 动 效 果 </title> 
<script src="jquery-3.3.1.js"></script> 
<style> 
input { 
width: 100px; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("#startAnimate") .click (function () 
var div = $("#div"); 
div.animate({ 
width: '100px', 
height: '50px', 
left: '100px', 
opacity: 0.4 
Pre “alow)s 
div.animate({ 
WwWadths "SOpx", 
height: '50px', 
I i Se 
opacity: 0.8 
}7 "Slow)s 
div.animate({ 
width: '50px', 
height: '50px', 
1eft: “16px"y 
opacity: 1 


lr "slow")s; 


t 
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</script> 

</head> 

<body> 
<input id="startAnimate" type="button" value=" 开 始 动画 " /><br /><br /> 
<div id="div" style="position:absolute;width:100px;height:100px; 
background-color:red"></div> 

</body> 

</html> 


在 浏览 器 中 打开 jq16.html， 其 显示 效果 如 图 14-18 所 示 ， 单 击 “ 开 始 动 画 ” 按 钮 可 以 
演示 动画 效果 。 


Fr 


3 ealie 
/| 口 滑动 效果 x 


GC 合 10 127.001:8.， 六 
| 开始 动画 ] 


图 14-18 jq16.html 的 显示 结果 


(45 jQuery 操作 DOM 


使 用 jQuery 可 以 方便 地 操作 DOM, 包括 读 写 页 面 元 素 的 内 容 或 属性 , 修改 页 面 元 素 ， 
操作 元 素 的 CSS 属性 等 。 


14.5.1 jQuery 读 写 元 素 的 内 容 和 属性 


在 jQuery 中 ， 可 以 使 用 以 下 方法 返回 或 设置 元 素 的 内 容 和 属性 : 

。 $(selector).text() 方 法 用 于 返回 或 设置 元 素 的 文本 内 容 ; 

。 $(selector).html() 方 法 用 于 返回 或 设置 元 素 的 内 容 (包括 HTML 标记 在 内 ); 
。 $(selector).val(0) 方 法 用 于 返回 或 设置 表单 字段 的 值 ; 

。 $(selector).attr() 方 法 用 于 返回 或 者 设置 元 素 的 属性 值 ; 

。 $(selector).removeAttr() 方 法 移 除 元 素 的 属性 。 

例如 : 


$ (selector) .attr ("href", "http://www.baidu.com"); 


也 可 以 允许 一 次 设置 多 个 属性 值 ， 例 如 : 
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$ (selector) .attr({ 
"href": "http://www.baidu.com", 
"target": "leftFrame" 

DD); 


例如 ，jq17.html， 使 用 jQuery 读 取 表 单 中 控件 的 值 。 


Jq17.html: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 读 取 元 素 的 属性 值 </title> 
<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
body { 
font-size: 12px; 
} 
input { 
border: lpx solid #CC6699; 
width: 100px; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$ ("input[type=button]") .click(function() { 
Var name = $("#name") .val (); 
Var pwd = $("#pwd") .val(); 
$("#msg") .text ("name:" + name + ",pwd:" + pwd); 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<form> 
用 户 名 : <input type="text" id="name" /><br /><br /> 
密 gnbsp; &gnbsp; &nbsp; &nbsp; 码 : <input type="password" id="pwd" /> 
<br /><br /> 
<input type="button" value=" 确 定 " /> 
</form> 
<div id="msg"></div> 
</body> 
</html> 


鞍 


在 浏览 器 中 打开 jq17.html, 输入 用 户 名 和 密码 , 和 
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确定 后 的 显示 结果 如 图 14-19 所 示 。 
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el 
/ D wet x CM 
EO 1270012 六 用 
A enomimoming ] 
密 码 : | 


Damewangmingming.pwd-123456 


图 14-19 jq17.html 的 显示 结果 


14.5.2 jQuery 更 改 页 面 元 素 


利用 jQuery 可 以 方便 地 在 页 面 中 添加 新 元 素 或 者 删除 页 面 中 己 有 的 元 素 。 其 常用 方法 
及 其 说 明 如 表 14-6 所 示 。 
表 14-6 jQuery 更 改 页 面 元 素 的 方法 


方法 说 明 
after() 在 选择 的 元 素 之 后 插入 内 容 
append() 在 选择 的 元 素 集合 中 的 元 素 结尾 插入 内 容 
appendTo() 向 目标 结尾 插入 选择 元 素 集合 中 的 元 素 
before() 在 选择 的 元 素 之 前 插入 内 容 
insertAfter() 把 选择 的 元 素 插入 到 另 一 个 指定 元 素 集合 的 后 面 
insertBefore() 把 选择 的 元 素 插入 到 另 一 个 指定 元 素 集合 的 前 面 
prependO 向 选择 元 素 集 合 中 的 元 素 的 开头 插入 内 容 
prependTo0) 向 目标 开头 插入 选择 元 素 集合 
TeplaceAll0 用 新 元 素 替 换 所 有 匹配 到 的 元 素 
replaceWith() 用 新 内 容 蔡 换 匹 配 的 内 容 
wrap() 把 选择 的 元 素 用 指定 的 内 容 包 囊 起 来 
wrapAllO 把 所 有 的 匹配 的 元 素 用 指定 的 内 容 包 于 起 来 
wrapinner() 把 每 一 个 匹配 的 元 素 的 子 元 素 使 用 指定 的 内 容 包 庄 起 来 
remove() 删除 匹配 元 素 及 其 子 元 素 
emptyO 删除 匹配 元 素 的 子 元 素 
例如 ，jql8.html， 在 段落 的 后 面 和 列表 前 面 添加 新 元 素 。 
Jq18.html: 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 
<title> 操 作 页 面 元 素 </title> 
<script src="jquery-3.3.1.js"></script> 
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<script type="text/javascript"> 


$ (document) .ready (function() { 


$ ("#addText") .click (function() { 


$ ("p") .append ("<font color='#9933FF'> 这 是 新 追加 的 内 容 
</font><br />"); 
nD; 


$ ("#addList") .click(function() { 


$ ("01") .prepend ("<font color='#FF6666'><1i> 新 列表 项 
< /TS</EonE ns 
Ds; 
DD); 
</script> 
</head> 


<body style="font-size:12px"> 


<p> 这 是 一 个 段落 <br /> 
</p> 


<O1> 


<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


<1i> 列 表 项 </1i> 
</o01> 


<input type="button" value=" 添 加 文本 " id="addText" /> 
<input type="button" value=" 添 加 列表 项 " id="addList" /> 
</body> 

</html> 


在 浏览 器 中 打开 jql8.html， 其 显示 结果 如 图 14-20 所 示 。 单 击 “ 添 加 文本 ”和 “添加 
列表 项 ”按钮 后 的 显示 结果 如 图 14-21 所 示 。 


| 加 世 [ 呈 攻 河 
六 操作 页 面 元 素 
| C 合 |@0 1270018020/c， 妇 | : 
- 这 是 一 个 段落 
这 是 一 个 段落 这 是 新 追加 的 内 容 
1 列表 项 1 新 列表 项 
:3 3 
3 列表 硕 和 列表 硕 
添加 文本 || 添加 列表 项 | 添加 文本 || 添加 列表 项 
[ 人 S| 
图 14-20 jq18.html 的 显示 结果 图 14-21 添加 新 内 容 之 后 的 显示 结果 


14.5.3 jQuery 操作 CSS 属性 
在 前 面 已 经 使 


过 S$(selector).css0 〇 方法 来 更 改元 素 的 CSS 


属性 。 此 外 ， 在 jQuery 中 还 
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可 以 读 取 、 添 加 、 删 除 元 素 的 CSS 属性 ， 操 作 CSS 属性 的 方法 如 表 14-7 所 示 。 
表 14-7 jQuery 中 操作 CSS 属性 的 方法 


方法 说 明 
addClass() 向 匹配 的 元 素 添加 指定 类 名 的 样式 
hasClass() 判断 匹配 的 元 素 是 否 具有 指定 类 的 样式 
removeClass() 删除 匹配 的 元 素 指定 类 的 样式 
toggleClass() 删除 或 添加 匹配 元 素 的 指定 类 的 样式 
css() 读 取 或 设置 元 素 的 CSS 属性 
例如 ，jq19.html， 单 击 按钮 更 改 div 的 样式 。 
jq19.html: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 更 改 样式 </title> 


<script src="jquery-3.3.1.js"></script> 
<style type="text/css"> 
sist 
font-size: 14px; 
background-color: #F5F5DC; 
border: lpx solid; 
color: #A52A2A; 
font-family: 楷体 ; 
上 
.second { 
font-size: 16px; 
background-color: #E0FFFF; 
color: #F08080; 
border: lpx solid #5F9EAO; 
} 
</style> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$ ("#first btn") .click (function() { 
$ ("div") .removeClass ("second"); 
SAAivm add lasat Eirat 
Ds; 
$("#second btn") .click (function() { 
$ ("div") .removeClass ("first"); 
$ ("div") .addClass ("second"); 
Oy 
Ds 
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</script> 
</head> 
<body> 
<div style="height:100px,width:100px" class="first"> 
春 眠 不 觉 晓 ，<br /> 处 处 闻 啼 鸟 。 
<br /> 夜来 风雨 声 ， 
<br /> 花 落 知 多 少 。 


</div> 


<input type="button" value=" 样 式 1" id="first btn" /> 
<input type="button" value=" 样 式 2" id="second btn" /> 
</body> 
</html> 


在 浏览 器 中 打开 jq19.html， 显 示 结果 如 图 14-22 所 示 ， 单 击 “ 样 式 2” 按 钮 ， 显 示 结 
果 如 图 14-23 所 示 。 


EE 习 吗 ba 
ms " 
C 全 |oOlz7oo18. 六 | : |@ 127o018. 妇 | : 
| 讲 虐 不 觉 晓 ， 
处 处 园 啼 乌 ， 
让 未 风雨 声 ， 
能 落 知 多 少 。 
样式 2 
图 14-22 jq19.html 的 显示 结果 图 14-23 ”更改 样 式 之 后 的 显示 结果 


小 结 


jQuery 是 当前 最 流行 的 JavaScript 库 ， 它 封装 了 很 多 预定 义 的 对 象 和 实用 函数 。 
jQuery 是 一 款 轻 量 级 的 JavaScript 框架 ， 选 择 器 使 用 方便 ， 便 于 操作 DOM 对 象 的 
元 素 ， 链 式 操作 可 以 将 多 个 操作 写 在 同一 行 代码 内 。 

jQuery 简化 了 对 CSS 和 AJAX 的 操作 , 兼容 了 大 部 分 的 主流 浏览 器 ; 它 有 丰富 的 第 
三 方 插件 的 支持 ， 例 如 树 形 菜单 、 日 期 控件 、 图 片 切 换 工具 等 。 

jQuery 选择 器 允许 通过 标签 名 、 属 性 名 或 者 内 容 对 HTML 元 素 进 行 选择 或 者 修改 
HTML 元 素 的 样式 属性 。 

jQuery 的 选择 器 很 多 ， 可 以 分 为 基本 选择 器 、 层 次 选择 器 、 过 滤 选 择 器 和 属性 过 
基本 选择 器 包括 id 选择 器 、element 选择 器 、class 选择 器 、* 选 择 器 以 及 并 列 选择 
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层次 选择 器 可 以 根据 页 面 中 的 HTML 元 素 之 间 的 柑 套 关系 来 选择 元 素 ， 主 要 包括 
ancestor descendant 选择 器 、parent > child 选择 器 、prev + next 选择 器 、prev~siblings 
选择 器 。 

过 滤 选 择 器 可 分 为 基本 过 滤器 、 内 容 过 滤器 、 可 见 性 过 滤器 、 属 性 过 滤器 等 。 过 滤 
选择 器 可 以 根据 元 素 的 内 容 和 索引 等 对 元 素 进行 选择 。 

。 jQuery 是 专门 为 事件 处 理 而 设计 的 , 事件 处 理 程序 是 当 HIML 页 面 中 发 生 某 些 事件 
时 所 调用 的 方法 。 

使 用 jQuery 可 以 很 方便 地 实现 页 面 元 素 的 特殊 效果 ,比如 隐藏 、 显 示 、 淡 入 、 淡 出 、 
滑动 以 及 动画 等 。 

。 使 用 jQuery 可 以 方便 地 操作 DOM， 包 括 读 写 页 面 元 素 的 内 容 或 属性 ， 修 改 页 面 元 
素 ， 操 作 元 素 的 CSS 属性 等 。 


习题 


1. 下 面 〈 ) 不 属于 jQuery 的 选择 器 。 
A. 基本 选择 器 
B. 层次 选择 器 
C， 表单 选择 器 
D. 节点 选择 器 
2，<a hre 人 ="..." title="..."> 这 里 是 超级 链接 </a>， 使 用 jQuery 如 何 获取 <a> 元 素 的 title 
的 属性 值 。( ) 
A. $("a").attr("title").val; 
B. S$("#a").attr("title™): 
C. $("a").attr("title"); 
D. $("a").attr("title").value; 
3， 页 面 上 有 3 个 元 素 ， 分 别 是 <div>、<span>、<p>， 如 果 这 3 个 标签 的 click 事件 都 
要 触发 同一 事件 ， 下 面 ( 。”) 是 正确 的 。 
A. S$("div,span.p").click(function(){...}):; 
B. S$("divllspanllp").click(functionO{...}); 
C. S$("divtspantp").click(function(O){...}): 
D. $("div~span~p").click(function(){...}); 
4. 在 jQuery 中 ， 要 删除 所 有 匹配 的 元 素 ， 应 该 使 用 ) 方法 。 
A. delete() 
B. emptyO 
C. remove() 
D. removeAll() 
5. 在 jQuery 中 ， 要 匹配 元 素 的 同 级 元 素 ， 需 要 使 用 ( ) 方法 。 
A. nextAll() 
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B. siblings() 
C. next() 
D. fd0 
6.， 当 一 个 文本 框 的 内 容 被 选中 时 ， 想 要 执行 指定 的 方法 ， 可 以 使 用 ( ) 事件 


. Click() 
. Change() 
. select() 
D. bind() 
7. 在 jQuery 中 指定 一 个 类 ， 如 果 存 在 就 执行 删除 功能 ， 如 果 不 存在 就 执行 添加 功能 ， 
下 面 〈 ) 可 以 直接 完成 该 功能 。 
A. removeClass() 
B. deleteClass() 
C. toggleClass() 
D. addClass() 
8， 如 果 要 匹配 包含 文本 的 元 素 ， 用 ( ) 实现 。 
A. text() 
B. contains() 
C. input() 
D. attr(name) 
9. 在 jQuery 中 ， 要 将 所 有 的 div 的 颜色 设置 成 绿色 ， 应 该 使 用 ( ) 实现 。 
10. 用 jQuery 实现 动态 删除 或 添加 表格 的 单元 行 。 
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